rem可以在移動端開發過程中帶來強大的便利性，本文講述了使用rem在實際開發中的步驟。 ...
what is rem ？
1）css3中的計量元素大小的單位，類似px、pt、em。
2）一種相對根元素font-size的計算方式。1rem = <html>'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 超級大屏設備 上使用。（好大一堆字&&圖片和視頻被拉模糊了）。
2）想不出來了。
綜上所述，rem可以在移動端開發過程中帶來強大的便利性，他或許也有些許缺點，但瑕不掩玉，遠遠被它的眾多優點的光芒覆蓋，也將是未來的趨勢。
