rem這是個(gè)低調的css單位，近一兩年開(kāi)始嶄露頭角，有許多同學(xué)對rem的評價(jià)不一，有的在嘗試使用，有的在使用過(guò)程中遇到坑就棄用了。但是我對rem綜合評價(jià)是用來(lái)做web app它絕對是最合適的人選之一。
rem（font size of the root element）是指相對于根元素的字體大小的單位。簡(jiǎn)單的說(shuō)它就是一個(gè)相對單位?？吹絩em大家一定會(huì )想起em單位，em（font size of the element）是指相對于父元素的字體大小的單位。它們之間其實(shí)很相似，只不過(guò)一個(gè)計算的規則是依賴(lài)根元素一個(gè)是依賴(lài)父元素計算。
這里我特別強調web app，web page就不能使用rem嗎，其實(shí)也當然可以，不過(guò)出于兼容性的考慮在web app下使用更加能突顯這個(gè)單位的價(jià)值和能力，接下來(lái)我們來(lái)看看目前一些企業(yè)的web app是怎么做屏幕適配的。
最近iphone6一下出了兩款尺寸的手機，導致的移動(dòng)端的屏幕種類(lèi)更加的混亂，記得一兩年前做web app有一種做法是以320寬度為標準去做適配，超過(guò)320的大小還是以320的規格去展示，這種實(shí)現方式以淘寶web app為代表作，但是近期手機淘寶首頁(yè)進(jìn)行了改版，采用了rem這個(gè)單位，首頁(yè)以?xún)纫琅f是和以前一樣各種混亂，有定死寬度的頁(yè)面，也有那種流式布局的頁(yè)面。
我們現在在切頁(yè)面布局的使用常用的單位是px，這是一個(gè)絕對單位，web app的屏幕適配有很多中做法，例如：流式布局、限死寬度，還有就是通過(guò)響應式來(lái)做，但是這些方案都不是最佳的解決方法。
例如流式布局的解決方案有不少弊端，它雖然可以讓各種屏幕都適配，但是顯示的效果極其的不好，因為只有幾個(gè)尺寸的手機能夠完美的顯示出視覺(jué)設計師和交互最想要的效果，但是目前行業(yè)里用流式布局切web app的公司還是挺多的，看看下面我收集的一些案例：
1.亞馬遜：
2.攜程：
3.蘭亭
上面的網(wǎng)站都是采用的流式布局的技術(shù)實(shí)現的，他們在頁(yè)面布局的時(shí)候都是通過(guò)百分比來(lái)定義寬度，但是高度大都是用px來(lái)固定住，所以在大屏幕的手機下顯示效果會(huì )變成有些頁(yè)面元素寬度被拉的很長(cháng)，但是高度還是和原來(lái)一樣，實(shí)際顯示非常的不協(xié)調，這就是流式布局的最致命的缺點(diǎn)，往往只有幾個(gè)尺寸的手機下看到的效果是令人滿(mǎn)意的，其實(shí)很多視覺(jué)設計師應該無(wú)法接受這種效果，因為他們的設計圖在大屏幕手機下看到的效果相當于是被橫向拉長(cháng)來(lái)一樣。
流式布局并不是最理想的實(shí)現方式，通過(guò)大量的百分比布局，會(huì )經(jīng)常出現許多兼容性的問(wèn)題，還有就是對設計有很多的限制，因為他們在設計之初就需要考慮流式布局對元素造成的影響，只能設計橫向拉伸的元素布局，設計的時(shí)候存在很多局限性。
還有一種是固定頁(yè)面寬度的做法，早期有些網(wǎng)站把頁(yè)面設置成320的寬度，超出部分留白，這樣做視覺(jué)，前端都挺開(kāi)心，視覺(jué)在也不用被流式布局限制自己的設計靈感了，前端也不用在搞坑爹的流式布局。但是這種解決方案也是存在一些問(wèn)題，例如在大屏幕手機下兩邊是留白的，還有一個(gè)就是大屏幕手機下看起來(lái)頁(yè)面會(huì )特別小，操作的按鈕也很小，手機淘寶首頁(yè)起初是這么做的，但近期改版了，采用了rem。
響應式這種方式在國內很少有大型企業(yè)的復雜性的網(wǎng)站在移動(dòng)端用這種方法去做，主要原因是工作大，維護性難，所以一般都是中小型的門(mén)戶(hù)或者博客類(lèi)站點(diǎn)會(huì )采用響應式的方法從web page到web app直接一步到位，因為這樣反而可以節約成本，不用再專(zhuān)門(mén)為自己的網(wǎng)站做一個(gè)web app的版本。
天貓的web app的首頁(yè)就是采用這種方式去做的，以320寬度為基準，進(jìn)行縮放，最大縮放為320*1.3 = 416，基本縮放到416都就可以兼容iphone6 plus的屏幕了，這個(gè)方法簡(jiǎn)單粗暴，又高效。說(shuō)實(shí)話(huà)我覺(jué)得他和用接下去我們要講的rem都非常高效，不過(guò)有部分同學(xué)使用過(guò)程中反應縮放會(huì )導致有些頁(yè)面元素會(huì )糊的情況。
1 | <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> |
上面講了一大堆目前大部分公司主流的一些web app的適配解決方案，接下來(lái)講下rem是如何工作的。
上面說(shuō)過(guò)rem是通過(guò)根元素進(jìn)行適配的，網(wǎng)頁(yè)中的根元素指的是html我們通過(guò)設置html的字體大小就可以控制rem的大小。舉個(gè)例子：
123456789101112131415 | html{ font-size:20px;}.btn { width: 6rem; height: 3rem; line-height: 3rem; font-size: 1.2rem; display: inline-block; background: #06c; color: #fff; border-radius: .5rem; text-decoration: none; text-align: center; } |
Demo 上面代碼結果按鈕大小如下圖：
我把html設置成10px是為了方便我們計算，為什么6rem等于60px。如果這個(gè)時(shí)候我們的.btn的樣式不變，我們再改變html的font-size的值，看看按鈕發(fā)生上面變化:
123 | html{ font-size:40px;} |
按鈕大小結果如下：
上面的width，height變成了上面結果的兩倍，我們只改變了html的font-size，但.btn樣式的width,height的rem設置的屬性不變的情況下就改變了按鈕在web中的大小。
其實(shí)從上面兩個(gè)案例中我們就可以計算出1px多少rem:
第一個(gè)例子：
120px = 6rem * 20px(根元素設置大值)
第二個(gè)例子：
240px = 6rem * 40px(根元素設置大值)
推算出：
10px = 1rem 在根元素（font-size = 10px的時(shí)候）；
20px = 1rem 在根元素（font-size = 20px的時(shí)候）；
40px = 1rem 在根元素（font-size = 40px的時(shí)候）；
在上面兩個(gè)例子中我們發(fā)現第一個(gè)案例按鈕是等比例放大到第二個(gè)按鈕，html font-size的改變就會(huì )導致按鈕的大小發(fā)生改變，我們并不需要改變先前給按鈕設置的寬度和高度，其實(shí)這就是我們最想看到的，為什么這么說(shuō)？接下來(lái)我們再來(lái)看一個(gè)例子：
由上面兩個(gè)的demo中我們知道改變html的font-size可以等比改變所有用了rem單位的元素，所以大家可以通過(guò)chrome瀏覽器的調試工具去切換第三個(gè)的demo在不同設備下的展示效果，或者通過(guò)縮放瀏覽器的寬度來(lái)查看效果，我們可以看到不管在任何分辨率下，頁(yè)面的排版都是按照等比例進(jìn)行切換，并且布局沒(méi)有亂。我只是通過(guò)一段js根據瀏覽器當前的分辨率改變font-size的值，就簡(jiǎn)單的實(shí)現了上面的效果，頁(yè)面的所有元素都不需要進(jìn)行任何改變。
到這里肯定有很多人會(huì )問(wèn)我是怎么計算出不同分辨率下font-size的值？
首先假設我上面的頁(yè)面設計稿給我時(shí)候是按照640的標準尺寸給我的前提下，（當然這個(gè)尺寸肯定不一定是640，可以是320，或者480，又或是375）來(lái)看一組表格。
上面的表格藍色一列是Demo3中頁(yè)面的尺寸，頁(yè)面是以640的寬度去切的，怎么計算不同寬度下font-site的值，大家看表格上面的數值變化應該能明白。舉個(gè)例子：384/640 = 0.6，384是640的0.6倍，所以384頁(yè)面寬度下的font-size也等于它的0.6倍，這時(shí)384的font-size就等于12px。在不同設備的寬度計算方式以此類(lèi)推。
Demo3中我是通過(guò)JS去動(dòng)態(tài)計算根元素的font-size，這樣的好處是所有設備分辨率都能兼容適配，淘寶首頁(yè)目前就是用的JS計算。但其實(shí)不用JS我們也可以做適配，一般我們在做web app都會(huì )先統計自己網(wǎng)站有哪些主流的屏幕設備，然后去針對那些設備去做media query設置也可以實(shí)現適配，例如下面這樣：
12345678910111213141516171819202122232425262728 | html { font-size : 20px;}@media only screen and (min-width: 401px){ html { font-size: 25px !important; }}@media only screen and (min-width: 428px){ html { font-size: 26.75px !important; }}@media only screen and (min-width: 481px){ html { font-size: 30px !important; }}@media only screen and (min-width: 569px){ html { font-size: 35px !important; }}@media only screen and (min-width: 641px){ html { font-size: 40px !important; }} |
上面的做的設置當然是不能所有設備全適配，但是用JS是可以實(shí)現全適配。具體用哪個(gè)就要根據自己的實(shí)際工作場(chǎng)景去定了。
下面推薦兩個(gè)國內用了rem技術(shù)的移動(dòng)站，大家可以上去參考看看他們的做法，手機淘寶目前只有首頁(yè)用了rem，淘寶native app的首頁(yè)是內嵌的web app首頁(yè)。
淘寶首頁(yè)：m.taobao.com
D X：m.dx.com
感謝你的閱讀，本文由 騰訊ISUX 版權所有，轉載時(shí)請注明出處，違者必究，謝謝你的合作。
注明出處格式：騰訊ISUX (http://isux.tencent.com/web-app-rem.html)
聯(lián)系客服
