Web移動端頁面 –響應式和動態REM

Criya發表於2018-05-11
WebREM

鄙人最近才剛剛開始學習一些關於移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。

響應式

什麼是響應式頁面呢？

顧名思義響應式頁面就是能做出響應的頁面，它的頁面效果不是定死的，會隨著使用者的改變而改變。

如何著手響應式有以下幾個思考的方向

  1. 找一份設計圖
  2. 使用Media Query
  3. 隱藏元素
  4. 新增meta viewport
  5. 明白手機端互動方式的區別

Media Query

是什麼

Media query 翻譯過來就是媒介查詢，媒介就是我們檢視這個網頁的裝置。
媒介查詢源於CSS3，它可以根據使用者的裝置所具有的某些特徵，來提供不同的樣式用於顯示。

用法

引用方式

它的引用方式一共有兩種

  • 元素中媒介查詢
  • 樣式表中媒介查詢
<!-- link元素中的CSS媒體查詢 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 樣式表中的CSS媒體查詢 -->
<style>
@media (max-width: 600px) {
  body{
        background: red;
    }
}
</style>

在link中使用媒介查詢後，即使不滿足樣式條件，這個樣式檔案依然會被下載。

條件判斷

媒介查詢的條件判斷的邏輯操作符只有and, only, not三種，多個判斷條件用()包裹後操作符隔開。

//當媒介最大寬度為800px且是橫屏時裡面的樣式生效
@media (max-width: 800px) and (orientation: landscape){
    ......
}

Mobile First

目前web前端開發專案型別可以分為兩種方式，Mobile First 和 Desktop First。Mobile First就是優先開發移動端後開發PC端，後者反之。

不同的Fist中我們Media Query針對的也不同，Mobile First中，因為我們以移動端為主，所以我們的Media Query應該是針對PC的條件去控制，Desktop Fist則針對移動端設定條件樣式。

Mobile First Demo

Web移動端頁面 –響應式和動態REM

這裡就用到了一開始所說隱藏

meta viewport

現在，你已經寫好了你的響應式網頁，那麼已經可以了嗎？
別急，你離完成僅剩最後一步。

由於歷史的原因，我們的手機在訪問網頁時，不管你是響應式網頁還是非響應式，瀏覽器都會將你的寬度改為980px。

這是歷史遺留的問題，因為最早的智慧手機為了完整的顯示一個網頁，直接將PC上的網頁縮放塞進手機瀏覽器中，經過調研，發現大部分的網頁都是980px左右，所以當我們用手機訪問網頁時寬度都會被縮放到980px。

我們只需要加上這樣一行程式碼就可以解決問題

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width設定頁面寬度為裝置寬度。
user-scalable=no不允許使用者縮放
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0最大最小預設縮放比例都為1。

這樣我們的響應式網頁才完全生效了。

移動端特點

  1. 沒有hover
  2. 有touch
  3. 沒有滾動條
  4. 沒有IE
  5. 沒有resize

因為移動端是沒有hover事件的所以當我們在需要相容移動端的頁面中應該儘量少用hover事件。
移動端一般很少監聽click事件，都是以touch事件為主，JS沒有滑動事件，但是可以通過touch事件模擬
沒有IE意味著我們可以為所欲為放飛自我，使用最新的CSS和HTML。

為什麼需要響應式？

當我們需要給不同的裝置顯示不同網頁（樣式）時，為什麼不可以一開始就寫好多個網頁再由後端負責根據使用者裝置來跳轉呢？

我們寫響應式需要思考非常多的問題，在一個頁面裡html css需要考慮很多判斷邏輯，這些多出來程式碼以及設計的時間可能已經能夠寫一個新的網頁，那為什麼不一開始就寫兩個網頁就好了呢？

確實，現在大部分互聯公司現在幾乎都不會去使用響應式頁面。

  • 部落格園：響應式
  • 百度：非響應式
  • 谷歌：非響應式
  • 淘寶：非響應式
  • 頭條：非響應式
  • 知乎：非響應式

國內大型公司可以說基本上都是非響應式網頁，只有那些互動性較弱比如個人blog，小型企業站點以展示內容為主的網站還會應用響應式設計。

動態REM自適應

在瞭解rem之前需要先知道

  • 瀏覽器的預設font-size是16px
  • Font-size最優先使用者在瀏覽器中設定的大小，chrome預設最小12px。

什麼是rem？

rem是眾多number單位中的其中一個，它的值為根元素font-size的值。

<style>
    body{font-size: 40px;}
    p{font-size: 2rem;}
</style>
<body>
  <p>hello</p>
  word
  <div>!!</div>
</body>

Web移動端頁面 –響應式和動態REM

因為給body標籤設定了40px，所以body裡面的內容應該都是40px。但是由於p在後面優先設定了2rem，瀏覽器的預設font-size為16px，也就是html標籤的font-size就是16px，所以現在的hello是32px。

也就是說rem的根元素的值指的就是html 的font-size的值。

rem有什麼用？

上面扯了那麼多介紹rem，那肯定是有用的。
別急，讓我細細道來。
當我們拿到設計稿，需要寫一個手機用的網頁時。Web移動端頁面 –響應式和動態REM

我們是希望在所有的手機上看到的頁面都是一個樣子的，頁面內每個元素在固定的位置。但是按照常規方法，一個樣式能做到讓所有手機完美（90%）還原設計稿的樣子嗎？

答曰：可以，用media寫響應式，針對不同的裝置寬度，展現不同的樣式。

好的，那讓我們開啟開發者工具模擬手機看看。

  • iPhone X : 375 x 812
  • iPhone 6/7/8 Plus : 414 x 736
  • iPhone 6/7/8 : 375 x 667
  • iPhone 5/SE : 320 x 568
  • Galaxy S5 : 360 x 640
  • Pixel 2 : 411 x 731

看到這些你還想用media嗎？你要寫多少個media？光是一個iPhone就可以搞死你更別說還有一堆的國產機等著你適配。

那怎麼辦呢，有沒有辦法可以讓一個CSS適應“所有”的手機呢？

辦法肯定有，那就是自適應，我們不需要知道使用者的手機的長寬是多少，我們讓網頁自己匹配使用者的手機長寬就好了啊。

自適應佈局

自適應佈局有下面兩種常規方法

  • 百分比佈局：寬度百分比。
  • 縮放佈局：按比例設定網頁寬高。

這兩個佈局一個百分一個比例看上去意思是一樣，其實不然。百分比佈局中的寬度樣式不是一個具體的值，而縮放是在已知寬度的情況下定死的值。

/*device-width = 320*/
body{
    width: 50%  /*160px*/
}
body{
    width: 160px /*160px*/
}

如果我們的目的是在手機上展現body佔據螢幕一半的效果的話，上面兩種寫法在寬度為320px的手機上效果是一樣的，都是將body的寬度設定為手機的一半長。
現在只是在寬度為320px的手機上展現了1/2的效果，那麼當我們的手機是寬度300px的時候呢？

/*device-width = 300*/
body{
    width: 50%  /*150px*/
}
body{
    width: 150px /*150px*/
}

如果是百分比佈局是不是不需要改動，而按比例佈局需要改動。

那麼百分比佈局能解決問題嗎？

不行，百分比佈局有個缺陷，高度是未知的，因為高度沒有辦法百分比，如果定死了高度那麼就沒有辦法與寬度適應了。一旦我們的頁面一複雜，未知的高度會帶來更多的問題。

總的來說我們的頁面需要靠寬度適配，再用這個寬度來決定自身的高度以達到寬高都成比例，在不同的手機上都可以按同樣的比例展現。

那有什麼方法可以準確獲取手機的寬度嗎？

這時我們的英雄登場了，rem。

上面說到rem是根元素font-size的值，那麼我們只需要將根元素html的font-size為手機的寬度，這時不就可以通過rem來設定有比例的寬高樣式了嗎。

rem怎麼用？

動態REM demo

Web移動端頁面 –響應式和動態REM

    var width=document.documentElement.clientWidth;
    document.write(`<style>html{font-size:${width / 10}px}</style>`)

JS程式碼就兩行，將rem設定為手機寬度的的10%，雖然設定width / 100可以完全模擬vw（自適應不用vw是因為vw相容性太差了），但是當em為1%時，一但寬度小於120px時，font-size就會小於12px，低於chrome預設的最小font-size就會出現bug，所以我們設定rem為10%。

還需要注意的是雖然width和height是用rem使用，但是不代表別的大小也需要用rem（如果字型的font-size也用rem，那當寬度很小時，字會小的看不清），我們應該搭配別的單位以獲得更美觀的效果。

使用SCSS自動轉換px

為了減少我們計算量，我們可以直接使用scss寫一個function幫我們解決轉換的問題。

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}
$designWidth : 640。

.box{
  background: grey;
  width: px(256);
  height: px(128);
  margin: px(32) px(32);
  float: left;
}

相關文章