移動端自適應佈局方案

背景

如今工做中有超過一半的時間用於移動端項目的開發，包括app嵌入頁，微信頁面和移動wap頁。

開發移動端頁面跟開發PC頁面的一個大區別就是移動端對響應式佈局的要求更高，不能像PC頁面同樣設計幾個斷點利用媒體查詢，兩邊留空白就解決。移動端頁面須要把屏幕空間都利用上，而移動設備的尺寸和分辨率多種多樣，解決移動端頁面的自適應佈局問題是搭建新的移動端項目的重點和難點。

通過研究，我在公司的多個移動端項目使用了REM佈局來解決移動端自適應佈局的問題。

REM介紹

rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位，rem佈局是一個流行的解決移動端響應式佈局的方案。在頁面初始化時，使用JS根據屏幕的尺寸和dpr等信息設置rem的大小，而在css中寫下元素的高度等信息時，使用rem。如將rem設置爲100px，則元素的高度爲36px時，須要將元素的高度寫成0.36rem。字體大小可能須要寫成0.12rem等，可讀性較差，輸入起來也不方便，下降了工做效率。

解決方案

在webpack中使用px2rem-loader。用法以下

rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'px2rem-loader?remUnit=75&remPrecision=8']
      }
    ]

這樣即可以應對常見的750px的設計圖，直接按照設計圖的尺寸來填寫屬性大小就好，
注意，還須要在html文件中引入flexible文件

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>

踩到的坑

微信瀏覽器若是退回的話，頁面被緩存，可是js文件沒有從新調用，會致使佈局混亂。須要調用pageshow事件來解決

e.addeventListener('pageshow', function(e) {
    // d的做用是從新設置documentElement的fontsize爲clientWidth的1/10
    e.persisted&&d()
})

深刻了解

你也許會對flexible.js作了什麼比較感興趣。在這以前，須要簡單瞭解一下viewport的知識

viewport

meta標籤

viewport meta標籤有六個屬性

1. width：設置layout viewport 的寬度，爲一個正整數，或字符串」width-device」
2. initial-scale：設置頁面的初始縮放值，爲數字，可帶小數
3. minimum-scale： 容許用戶的最小縮放值，爲數字，可帶小數
4. maximum-scale：容許用戶的最大縮放值，爲數字，可帶小數
5. height 設置layout viewport 的高度
6. user-scalable 是否容許用戶進行縮放，值爲」no」或」yes」

三種viewport

1. layout viewport 佈局視窗

   網站的寬度，能夠經過document.documentElement.clientWidth獲取，經過viewport meta標籤設置

2. visual viewport——視覺視窗

   表明瀏覽器可視區域的大小，能夠經過 document.documentElement.innerWidth來獲取

3. ideal viewport——理想視窗

   跟移動設備相關的viewport，移動設備的寬度。iPhone的值是320

其餘知識

visual viewport width = ideal viewport width / zoom factor

zoom factor能夠設置initial-scale來控制
當visual viewport = layout viewport時，頁面無水平滾動條，恰好顯示所有內容

若是不設置initial-scale，經過設置viewport meta的width爲device-width，能夠令layout viewport等於ideal viewport，從而達到頁面無水平滾動條的效果

lib-flexible原理

1. 獲取dpr和設置dpr的倒數scale
2. 動態生成viewport meta，initial-scale值爲scale
3. 設置rem爲clientWidth(layoutview port width) 的1 / 10

這時咱們咱們開發項目只要注意屏幕的寬度是10rem就能夠了

最後

其實REM方案主要仍是以clientWidth的1/10爲基本單位設置元素的尺寸來達到自適應的目的。能夠使用VW來代替，也有px2vw之類的插件。

要達到自適應佈局，還能夠使用百分比、flex佈局或是grid佈局，這裏就不細說了。

本文章爲前端進階系列的一部分,
歡迎關注和star本博客或是關注個人github

參考

1. px2rem
2. 移動前端開發之viewport的深刻理解