rem是指相對于根元素的字體大小的單位。

簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em是指相對于父元素的字體大小的單位。

區別：它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

那么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;
    }

上面代碼結果按鈕大小如下圖：

我把html設置成20px是為了方便我們計算，為什么6rem等于60px。如果這個時候我們的.btn的樣式不變，我們再改變html的font-size的值，看看按鈕發生上面變化:

html{
    font-size:40px;
}

按鈕大小結果如下：

上面的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的改變就會導致按鈕的大小發生改變，我們并不需要改變先前給按鈕設置的寬度和高度，其實這就是我們最想看到的，我們知道改變html的font-size可以等比改變所有用了rem單位的元素，所以大家可以通過chrome瀏覽器的調試工具去切換第三個的demo在不同設備下的展示效果，或者通過縮放瀏覽器的寬度來查看效果，我們可以看到不管在任何分辨率下，頁面的排版都是按照等比例進行切換，并且布局沒有亂。

當然你也要借助媒體查詢來實現上面的功能，例如下面這樣：

 
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; 
        }
    }

上面的做的設置當然是不能所有設備全適配，這里作為參考。所以移動端借助rem單位開發還是很有優勢的。