rem — 低調的css單位

rem這是個低調的 css 單位，近一兩年開始嶄露頭角，有許多同學對rem的評價不一，有的在嘗試使用，有的在使用過程中遇到坑就棄用了。但我對rem綜合評價是用來做web app它絕對是最適合的人選之一。

rem是什麼？

rem（font size of the root element）指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

為什麼web app要使用rem？

這裡我特別強調web app，web page就不能使用rem嗎，其實也當然可以，不過出於兼容性的考慮在web app下使用更加能突顯這個單位的價值和能力接下來我們來看看一些企業的web app是怎麼做螢幕適配的。

1、實現強大的螢幕適配佈局：

最近iphone6一下出了兩款尺寸的手機，導致的行動端的螢幕種類更加的混亂，記得一兩年前做web app有一種做法是以320寬度為標準去做適配，超過320的大小還是以320的規格去展示，這種實現方式以淘寶web app為代表作，但是近期手機淘寶首頁進行了改版，採用了rem這個單位，首頁以內依舊是和以前一樣各種混亂，有定死寬度的頁面，也有那種流式佈局的頁面。

我們在作頁面佈局的使用常用的單位是px，這是一個絕對單位，web app的螢幕適配有很多中做法，例如：流式佈局、限死寬度，還有就是透過響應式來做，但是這些方案都不是最佳的解決方法。

例如串流佈局的解決方案有不少弊端，它雖然可以讓各種螢幕都適配，但是顯示的效果極其的不好，因為只有幾個尺寸的手機能夠完美的顯示出視覺設計師和互動最想要的效果，但是目前業界用串流佈局作web app的公司非常多，看看下面我收集的一些案例：

亞馬遜：

#攜程：

蘭亭：

##上面的網站都是採用的流式佈局的技術實現的，他們在頁面佈局的時候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式佈局的最致命的缺點，往往只有幾個尺寸的手機下看到的效果是令人滿意的，其實很多視覺設計師應該無法接受這種效果，因為他們的設計圖在大螢幕手機下看到的效果相當於被橫向拉長來一樣。

串流佈局並不是最理想的實現方式，透過大量的百分比佈局，會經常出現許多的bug，還有就是對設計師的設計有很多的限制，因為他們在設計之初就需要考慮流式佈局，只能設計橫向拉伸的元素佈局，設計的時候有許多限制。

2.固定寬度做法

還有一種是固定頁面寬度的做法，早期有些網站把頁面設定成320的寬度，超出部分留白，這樣做視覺，前端都挺開心，視覺在也不用被流式佈局限制自己的設計靈感了，前端也不用在搞坑爹的流式佈局。但這種解決方案也是存在一些問題，例如在大螢幕手機下兩邊是留白的，還有一個就是大螢幕下看起來頁面會特別小，手機淘寶首頁起初是這麼做的，但近期改版了，可是天貓首頁還沒改版。

3.響應式做法

響應式這種方式在國內很少有大型企業的複雜性的網站在移動端用這種方法去做，主要原因是工作大，維護性難，所以一般都是中小型的入口網站或部落格類別網站會採用響應式的方法從web page到web app直接一步到位，因為這樣反而可以節約成本，不用再專門為自己的網站做一個web app的版本。

4.設定 viewport進行縮放

#

1. < meta name = "viewport" content = "width = 320 , maximum - scale = 1 .3 ,#user - - scale = 1 .3 ,#user - 

##天貓的web app的首頁就是採用這種方式去做的，以320寬度為基準，進行縮放，最大縮放為320*1.3 = 416，基本縮放到426都可以兼容iphone6 plus的螢幕了，這個方法簡單粗暴，又有效率。說實話我覺得他和用接下去我們要講的rem都非常高效，不過有部分同學使用過程中反應縮放過程中有些糊，具體我使用沒怎麼遇到過這種情況。

rem能等比例適配所有螢幕

上面講了一大堆目前大部分公司主流的一些web app的適配解決方案，接下來講下rem是如何運作的。

上面說過rem是透過根元素進行適應的，網頁中的根元素指的是html我們透過設定html的字體大小就可以控制rem的大小。舉個例子：

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。如果這時候我們的.btn的樣式不變，我們再改變html的font-size的值，看看按鈕發生上面變化:

html {
     font-size: 40px ;
}

Demo

按鈕大小結果如下：

上面的width，height變成了上面結果的兩倍，我們只改變了html的font-size，但.btn樣式的width ,height的rem設定的屬性不變的情況下就改變了按鈕在web中的大小。

其實從上面兩個案例中我們就可以計算出1px多少rem:

第一個範例：

120px = 6rem * 20px(根元素設定大值)

第二個範例：

240px = 6rem * 40px(根元素設定大值)

推導出：

#10px  = 1rem 在根元素（font-size = 10px的時候）；

20px  = 1rem 在根元素（font-size = 20px的時候）；

40px  = 1rem 在根元素（font-size = 40px的時候）;

在上面兩個例子中我們發現第一個案例按鈕是等比例放大到第二個按鈕，html font-size的改變就會導致按鈕的大小改變，我們並不需要改變先前給按鈕設定的寬度和高度，其實這就是我們最想看到的，為什麼這麼說？接下來我們再來看一個例子：

Demo

由上面兩個的demo中我們知道改變html的font-size可以等比改變所有用了rem單位的元素，所以大家可以透過chrome瀏覽器的調試工具去切換第三個的demo在不同裝置下的展示效果，或者透過縮放瀏覽器的寬度來查看效果，我們可以看到不管在任何解析度下，頁面的排版都是按照等比例進行切換，且佈局沒有亂。我只是透過一段js根據瀏覽器目前的解析度改變font-size的值，就簡單的實作了上面的效果，頁面的所有元素都不需要進行任何改變。

到這裡一定有很多人會問我怎麼算出不同解析度下font-size的值？

首先假設我上面的頁面設計稿給我時候是按照640的標準尺寸給我的前提下，（當然這個尺寸肯定不一定是640，可以是320，或者480，又或375 ）來看一組表格。

 

上面的表格藍色一列是Demo3中頁面的尺寸，頁面是以640的寬度去切的，怎麼計算不同寬度下font -site的數值，大家看表格上面的數值變化應該可以明白。舉個例子：384/640 = 0.6，384是640的0.6倍，所以384頁寬度下的font-size也等於它的0.6倍，這時384的font-size就等於12px。在不同設備的寬度計算方式以此類推。

Demo3中我是透過JS去動態運算根元素的font-size，這樣的好處是所有裝置解析度都能相容適配，淘寶首頁目前就是用的JS運算。但其實不用JS我們也可以做適配，一般我們在做web app都會先統計自己網站有哪些主流的螢幕設備，然後去針對那些設備去做media query設定也可以實現適配，例如下面這樣：

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是可以實現全適配。具體用哪個就要根據自己的實際工作場景去定了。

下面推薦兩個國內用了rem技術的行動站，大家可以上去參考看看他們的做法，手機淘寶目前只有首頁用了rem，native app的首頁是內嵌的web app首頁。

淘寶首頁：m.taobao.com

D X：m.dx.com

最後我們再來看看他的相容性：

更多rem — 低調的css單位相關文章請關注PHP中文網！