what is rem ？

1. css3中的計量元素大小的單位，類似px、pt、em。
2. 一種相對根元素font-size的計算方式。1rem = ’s font-size px (你懂就好)
3. 使用場景：每個元素的寬高、文字大小、行距、補白等一切可以使用長度單位的地方。
4. 使用範例:

html{font-size:37.5px;}/*根元素的基礎font-size被設定為37.5px，則1rem=37.5px*/
#box1{width:10rem;height:2rem;font-size:0.5rem;}/*box1的寬度10rem則被計算成寬度為375px，高度為75px，文字大小為18.25px；*/
 

#box1 .title{width:2rem;}/*title的寬度依舊相對於根元素計算，結果為75px*/

rem在移動端的適配

　　由上面的例子可以看出，使用rem進行佈局的網站，我們只需要修改根元素的font-size大小，則整個網頁的元素均可以按照預期進行等比例的計算和適配。

　　比如，在上面的例子中，我們將html的font-size改為32px，那麼box1的樣式則變成了寬320px,高64px,文字大小則變為16px;

　　也就是說，在開發過程中，我們只要基於一種寬度的裝置使用rem進行佈局。然後使用js或css的media來根據寬度改變html的基礎font-size。就可以適配各種移動端裝置了。

　　步驟如下：

　　　　1.假設我們拿到了一張750px寬度的設計圖。並且準備在iPhone6上進行除錯，iphone6的螢幕寬度為375px，他們的比例是2：1；
　　　　初始過程：
　　　　設定<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
　　　　設定html{font-size:37.5px} 　　

　　　　//為什麼設定為37.5px？ 你也可以設定為其它的值。但為了易於換算和記憶，我們預設為每種螢幕設定他的基礎font-size
 
=（螢幕寬度/10px）;

開發過程：將每個元素設定的單位使用rem（任何原本使用px，em，pt的地方），數量為（設計圖上的元素的實際px/2/37.5）rem；

　　　　　　…

　　　 好了，我們的頁面已經開發完成了。

　　　　2. 此時，我們的頁面，在iPhone6下面，已經是妥妥的了。那麼如何相容其它不同寬度的移動裝置呢？
　　　　思路：改變每種不同寬度的裝置的根元素的css屬性，使其font-size值都為裝置寬度/10px。

方案1：在頁面頭部插入一段JS。 //為什麼是頭部？–防止頁面閃爍

(function() {
    var newRem = function() {
        var html = document.documentElement;
        html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px';
    };
    window.addEventListener('resize', newRem, false);
    newRem();
})();

方案2：在css檔案中增加媒體查詢

@media (min-width: 320px){html{font-size: 32px;} }
@media (min-width: 360px){html{font-size: 36px;} }
@media (min-width: 375px){html{font-size: 37.5px;} }
@media (min-width: 384px){html{font-size: 38.5px;} }
@media (min-width: 414px){html{font-size: 41.4px;} }
@media (min-width: 448px){html{font-size: 44.8px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 51.2px;} }
@media (min-width: 544px){html{font-size: 54.4px;} }
@media (min-width: 576px){html{font-size: 57.6px;} }
@media (min-width: 608px){html{font-size: 60.8px;} }
@media (min-width: 640px){html{font-size: 64px;} }
@media (min-width: 750px){html{font-size: 75px;} }
@media (min-width: 800px){html{font-size: 80px;} }
@media (min-width: 1024px){html{font-size: 102.4px;} }

　　　　
　　　　 哪種方案更好些？

　　　　　　css適配了大部分主流的螢幕，並且輕量一些，不需要進行計算。

　　　　　　js根據具體的螢幕寬度進行精確的計算，可以適配全部的裝置，

　　　　　　還是需要根據自己的使用場景進行選擇。

rem的相容性如何？

參考下圖：

可以看到，一片飄綠，結果喜人。

rem進行適配的一些優點：

　　1）相對改變viewport，rem的方式不變形，不模糊。

　　2）相對於em，rem不相對於父級，所以不會導致混亂。

　　3）相對於px，無需多說了。

　　4）相對各種媒體查詢進行自適應，rem的方式可以一鍵更改，省了無數程式碼，且維護方便。

rem的一些不適用場景

　　1）想要在ipad or pc or 超級大屏裝置 上使用。（好大一堆字&&圖片和視訊被拉模糊了）。