H5手機(jī)端開(kāi)發(fā)制作之新單位rem說(shuō)明文檔

H5手機(jī)端開(kāi)發(fā)制作之新單位rem說(shuō)明文檔

制作人：林江濤技術(shù)部2016/02/261.為什么放棄使用百分比轉(zhuǎn)而使用css3的rem新單位？

以需求來(lái)介入：

都知道現(xiàn)在手機(jī)屏幕分辨率越來(lái)越多了，假設(shè)我們的網(wǎng)頁(yè)需要適配的iPhone4（320px），iPhone6(375px)，iPhone6Plus(414px)。

我們的需求是，當(dāng)用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)，根據(jù)屏幕的尺寸，來(lái)向用戶(hù)展示更適合用戶(hù)的文字、圖片、按鈕大小。

（1）iPhone4的時(shí)候，希望網(wǎng)頁(yè)的內(nèi)容文字大小12px=12*（320/320）px，按鈕的大小是240px。

（2）Iphone6的時(shí)候，希望網(wǎng)頁(yè)的內(nèi)容文字大小14px=12*（375/320）px，按鈕的大小是280px，等比縮放。

（3）Iphone6Plus的時(shí)候，希望網(wǎng)頁(yè)的內(nèi)容文字大小15.5px=12*（414/320）px，按鈕的大小是310px，等比縮放。

以前的做法

在rem概念沒(méi)引入前我們的做法是，以最小的屏幕（iPhone）做一版數(shù)據(jù)出來(lái)，然后通過(guò)js去控制

viewport的initial-scale（網(wǎng)頁(yè)縮放比例）。

如：iPhone4下：

<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0/>那么對(duì)應(yīng)的到了iPhone6需要調(diào)整縮放比例initial-scale=375/320=1.18

<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.18/>同理到了iPhone6Plus對(duì)應(yīng)的應(yīng)該是initial-scale=414/320=1.30

<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=3.0/>早期【天貓】移動(dòng)端也是用用這樣的方法實(shí)現(xiàn)的。能滿(mǎn)足我們的需求。

缺點(diǎn)是：這樣做會(huì)使得，因?yàn)閕nitial-scale越來(lái)越大，相當(dāng)于拉伸網(wǎng)頁(yè)，而使得在大屏幕的移動(dòng)端設(shè)備下，文字、圖片會(huì)變模糊。

rem做法

現(xiàn)在【天貓】的做法就是用rem來(lái)做。

rem（fontsizeoftherootelement）是指相對(duì)于根元素的字體大小的單位（可以聯(lián)想一下em）。也就是比如我定義：

html{font-size:14px}那么如引用.test-boxfont-size/width/height設(shè)為2rem的話(huà)就相當(dāng)于2*14px。也就是

.test-box{font-size:2rem;/*font-size:28px;*//*2*14px/}

我們可以理解為，一旦根節(jié)點(diǎn)html定義的font-size變化，那么整個(gè)網(wǎng)頁(yè)中運(yùn)用到rem的也會(huì)變化。我們來(lái)看一下【淘寶】的實(shí)例：

先展示效果，可以看到頁(yè)面上的文字、按鈕、logo都有相應(yīng)的變大調(diào)整。

iPhone4下的效果。iPhone6下的效果。iPhone6plus下的效果。具體大家可以去看【淘寶】的移動(dòng)端頁(yè)面的案例。參考網(wǎng)址：/mobile/lib-flexible-for-html5-layout.html?from=timeline&isappinstalled=02.那么該如何使用rem？在整個(gè)手淘團(tuán)隊(duì)，有一個(gè)名叫l(wèi)ib-flexible的庫(kù)，而這個(gè)庫(kù)就是用來(lái)解決H5頁(yè)面終端適配的。lib-flexible是什么？lib-flexible是一個(gè)制作H5適配的開(kāi)源庫(kù)使用方法：頭部引用這兩個(gè)文件即可。<scriptsrc="build/flexible_css.debug.js"></script><scriptsrc=“build/flexible.debug.js”></script>

文件下載地址：/amfe/lib-flexible/zip/master3.那么有一個(gè)問(wèn)題，單位如何換算？打個(gè)比方：如果你的PS設(shè)計(jì)圖的尺寸寬度是750px（這里指的是有效可視區(qū)域，就算你旁邊有幾萬(wàn)像素的白邊都跟這沒(méi)關(guān)系。）那么計(jì)算方法就是10rem（整個(gè)頁(yè)面寬度就是10rem不管你設(shè)計(jì)圖多寬）=750px，也就是1rem=75px

。這樣在寫(xiě)代碼的時(shí)候width=75px就可以寫(xiě)成width=1rem

。接下來(lái)你肯定要問(wèn)我，那么每一個(gè)像素單位換算成rem豈不是每一個(gè)都要用計(jì)算器計(jì)算出來(lái)，開(kāi)玩笑，我怎么會(huì)給你這個(gè)機(jī)會(huì)。下面給大家介紹一款自動(dòng)計(jì)算rem的插件，超級(jí)好用！先看一下效果4.插件安裝方法（1）下載安裝SublimeText3.這里我已經(jīng)裝好了SublimeText3.rar，位置在賀喜來(lái)共享>軟件

，解壓壓縮包后直接打開(kāi)sublime_text.exe這個(gè)文件就可以用。（2）安裝關(guān)鍵插件cssrem-master，壓縮包里我已經(jīng)裝好了。如果沒(méi)裝的話(huà)就去這個(gè)地址下載/flashlizi/cssrem

下載完以后解壓壓縮包將cssrem-master這個(gè)文件夾放在這個(gè)文件下面就可以了。（3）配置cssrem.sublime-settings文件。首先，打開(kāi)sumlime_text，新建一個(gè)css文件，這時(shí)候插件已經(jīng)可以用了，按一下tab鍵自動(dòng)會(huì)將px轉(zhuǎn)換為rem。接下來(lái)將這個(gè)文件拖到軟件中，打開(kāi)后是這樣子的{“px_to_rem”:75,//這個(gè)75就是你轉(zhuǎn)換的比例“max_rem_fraction_length”:6,//這里是轉(zhuǎn)換后小數(shù)點(diǎn)后的位數(shù)，建議為2“available_file_types”:[“.css”,“.less”,“.sass”]//此處不用動(dòng)}配置完此文件保存關(guān)掉軟件重啟就可以用了。注意：自動(dòng)換算單位必須在css文件里才有效，直接在html中寫(xiě)樣式是沒(méi)有用的！所有的單位都可以用rem來(lái)寫(xiě)，比如width，height，line-height,margin,padding等等，只有font-size不建議用rem。我們不希望文本在Retina屏幕下變小，另外，我們希望在大屏手機(jī)上看到更多文本，以及，現(xiàn)在絕大多數(shù)的字體文件都自帶一些點(diǎn)陣尺寸，通常是16px和24px，所以我們不希望出現(xiàn)13px和15px這樣的奇葩尺寸。如此一來(lái)，就決定了在制作H5的頁(yè)面中，rem并不適合用到段落文本上。所以在Flexible整個(gè)適配方案中，考慮文本還是使用px作為單位。只不過(guò)使用[data-dpr]屬性來(lái)區(qū)分不同dpr下的文本字號(hào)大小。因此，css中所有帶font-size的樣式都應(yīng)該這樣來(lái)寫(xiě)div