摘要：背景現(xiàn)在工作中有超過(guò)一半的時(shí)間用于移動(dòng)端項(xiàng)目的開(kāi)發(fā)，包括嵌入頁(yè)，微信頁(yè)面和移動(dòng)頁(yè)。經(jīng)過(guò)研究，我在公司的多個(gè)移動(dòng)端項(xiàng)目使用了布局來(lái)解決移動(dòng)端自適應(yīng)布局的問(wèn)題。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位，布局是一個(gè)流行的解決移動(dòng)端響應(yīng)式布局的方案。

現(xiàn)在工作中有超過(guò)一半的時(shí)間用于移動(dòng)端項(xiàng)目的開(kāi)發(fā)，包括app嵌入頁(yè)，微信頁(yè)面和移動(dòng)wap頁(yè)。

開(kāi)發(fā)移動(dòng)端頁(yè)面跟開(kāi)發(fā)PC頁(yè)面的一個(gè)大區(qū)別就是移動(dòng)端對(duì)響應(yīng)式布局的要求更高，不能像PC頁(yè)面一樣設(shè)計(jì)幾個(gè)斷點(diǎn)利用媒體查詢，兩邊留空白就解決。移動(dòng)端頁(yè)面需要把屏幕空間都利用上，而移動(dòng)設(shè)備的尺寸和分辨率多種多樣，解決移動(dòng)端頁(yè)面的自適應(yīng)布局問(wèn)題是搭建新的移動(dòng)端項(xiàng)目的重點(diǎn)和難點(diǎn)。

經(jīng)過(guò)研究，我在公司的多個(gè)移動(dòng)端項(xiàng)目使用了REM布局來(lái)解決移動(dòng)端自適應(yīng)布局的問(wèn)題。

rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位，rem布局是一個(gè)流行的解決移動(dòng)端響應(yīng)式布局的方案。在頁(yè)面初始化時(shí)，使用JS根據(jù)屏幕的尺寸和dpr等信息設(shè)置rem的大小，而在css中寫下元素的高度等信息時(shí)，使用rem。如將rem設(shè)置為100px，則元素的高度為36px時(shí)，需要將元素的高度寫成0.36rem。字體大小可能需要寫成0.12rem等，可讀性較差，輸入起來(lái)也不方便，降低了工作效率。

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

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

這樣便可以應(yīng)對(duì)常見(jiàn)的750px的設(shè)計(jì)圖，直接按照設(shè)計(jì)圖的尺寸來(lái)填寫屬性大小就好，
注意，還需要在html文件中引入flexible文件

微信瀏覽器如果退回的話，頁(yè)面被緩存，但是js文件沒(méi)有重新調(diào)用，會(huì)導(dǎo)致布局混亂。需要調(diào)用pageshow事件來(lái)解決

e.addeventListener("pageshow", function(e) {
    // d的作用是重新設(shè)置documentElement的fontsize為clientWidth的1/10
    e.persisted&&d()
})

你也許會(huì)對(duì)flexible.js做了什么比較感興趣。在這之前，需要簡(jiǎn)單了解一下viewport的知識(shí)

viewport

meta標(biāo)簽

viewport meta標(biāo)簽有六個(gè)屬性

width：設(shè)置layout viewport 的寬度，為一個(gè)正整數(shù)，或字符串”width-device”

initial-scale：設(shè)置頁(yè)面的初始縮放值，為數(shù)字，可帶小數(shù)

minimum-scale： 允許用戶的最小縮放值，為數(shù)字，可帶小數(shù)

maximum-scale：允許用戶的最大縮放值，為數(shù)字，可帶小數(shù)

height 設(shè)置layout viewport 的高度

user-scalable 是否允許用戶進(jìn)行縮放，值為”no”或”yes”

三種viewport

layout viewport 布局視窗

網(wǎng)站的寬度，可以通過(guò)document.documentElement.clientWidth獲取，通過(guò)viewport meta標(biāo)簽設(shè)置

visual viewport——視覺(jué)視窗

代表瀏覽器可視區(qū)域的大小，可以通過(guò) document.documentElement.innerWidth來(lái)獲取

ideal viewport——理想視窗

跟移動(dòng)設(shè)備相關(guān)的viewport，移動(dòng)設(shè)備的寬度。iPhone的值是320

其他知識(shí)

visual viewport width = ideal viewport width / zoom factor

zoom factor可以設(shè)置initial-scale來(lái)控制
當(dāng)visual viewport = layout viewport時(shí)，頁(yè)面無(wú)水平滾動(dòng)條，剛好顯示全部?jī)?nèi)容

如果不設(shè)置initial-scale，通過(guò)設(shè)置viewport meta的width為device-width，可以令layout viewport等于ideal viewport，從而達(dá)到頁(yè)面無(wú)水平滾動(dòng)條的效果

lib-flexible原理

獲取dpr和設(shè)置dpr的倒數(shù)scale

動(dòng)態(tài)生成viewport meta，initial-scale值為scale

設(shè)置rem為clientWidth(layoutview port width) 的1 / 10

這時(shí)我們我們開(kāi)發(fā)項(xiàng)目只要注意屏幕的寬度是10rem就可以了

其實(shí)REM方案主要還是以clientWidth的1/10為基本單位設(shè)置元素的尺寸來(lái)達(dá)到自適應(yīng)的目的。可以使用VW來(lái)代替，也有px2vw之類的插件。

要達(dá)到自適應(yīng)布局，還可以使用百分比、flex布局或是grid布局，這里就不細(xì)說(shuō)了。

本文章為前端進(jìn)階系列的一部分,
歡迎關(guān)注和star本博客或是關(guān)注我的github

px2rem

移動(dòng)前端開(kāi)發(fā)之viewport的深入理解