在最近的移動端佈局當中，最炙手可熱的方式便是使用rem進行元素的佈局。以下便是從最近的文章中所總結出來的一點東西。 首先，我們必須有以下的疑問： rem的本質是什麼？ rem如何實現自適應佈局？ 如何根據設計稿來調整rem的值？ rem佈局是能純CSS還是必須JS進行輔助？ 接著，我們來稍微解答或者 ...
在最近的移動端佈局當中，最炙手可熱的方式便是使用rem進行元素的佈局。以下便是從最近的文章中所總結出來的一點東西。
首先，我們必須有以下的疑問：
rem的本質是什麼？
rem如何實現自適應佈局？
如何根據設計稿來調整rem的值？
rem佈局是能純CSS還是必須JS進行輔助？
接著，我們來稍微解答或者解決以上的問題
一.rem的自適應原理
rem（font size of the root element）是指相對於根元素的字體大小的單位，既是一個相對的計量單位。而於此類似的便是em（font size of the element）是指相對於父元素的字體大小的單位。所以，兩個都是相對計量單位。區別在於一個相對於根元素，一個相對於父元素。rem就是根據HTML的font-size大小來進行的變化。基於該原理，可以在每一個設備下根據設備的寬度設置對應的html字型大小，從而實現自適應佈局。
二.rem 的值
目前有兩種，一種是根據js來調整html的字型大小，另一種則是通過媒體查詢來調整字型大小。
三.移動端使用rem佈局
在採用rem之前移動端的主流適配方案
1.流式佈局（百分比佈局）
優點: 簡單方便,使用簡單,只需固定高度即可,寬度自適應 ；
缺點: 在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調；
2.固定寬度
優點: 與設備寬度做等比縮放 ；
缺點: 在大屏幕手機下兩邊是留白的，還有一個就是大屏幕手機下看起來頁面會特別小，操作的按鈕也很小，手機淘寶首頁起初是這麼做的,但最後改版了，採用了rem；
3.響應式做法
優點:可以節約成本，不用再專門為自己的網站做一個webapp的版本,所以一般都是中小型的門戶或者博客類站點會採用響應式的方法從web page到web app直接一步到位；
缺點:工作量大，維護性難,這種方式在國內很少有大型企業的複雜性的網站在移動端用這種方法去做；
採用rem的優勢
開頭提過rem是指相對於根元素的字體大小的單位,網頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小。
html{
font-size:10px;
} .btn{
width:6rem;
height:3rem;
line-height:3rem;
font-size:1.2rem;
border: 1px solid #333;
color: #333;
border-radius: 0.5rem;
text-align: center;
margin: 10px auto;
}
此時，我們會發現整個按鈕大小是60px*30px。如果我們將根元素的font-size更改為20px，按鈕就會變成120px*60px。是之前的等比放大。
所以。我們僅僅是改變了根元素html的font-size，而.btn元素的width，height的rem屬性不變，就實現了按鈕在web中的改變。
所以，得出
1rem = 10px 在根元素的 font-size = 10px 的時候；
1rem = 20px 在根元素的 font-size = 20px 的時候；
1rem = 40px 在根元素的 font-size = 40px 的時候；
在上面兩個例子中我們發現第一個案例按鈕是等比例放大到第二個按鈕，html font-size的改變就會導致按鈕的大小發生改變，我們並不需要改變先前給按鈕設置的寬度和高度，其實這就是我們最想看到的。
正是基於這個出發，我們可以在每一個設備下根據設備的寬度設置對應的html字型大小，從而實現了自適應佈局。
三.現在rem主流的適配有兩種方案：
1.rem隨設備寬度做自適應，scale值固定為1 ;
2.rem隨設備寬度做自適應,viewport進行縮放，scale值不固定;
