先拋出一個問題：為什么要選擇rem？
px：像素是相對於顯示器屏幕分辨率而言的相對長度單位。pc端使用px倒也無所謂，可是在移動端，因為手機分辨率種類頗多，不可能一個個去適配，這時px就顯得非常無力，所以就要考慮em和rem。
em：繼承父級的，假設html的font-size默認為16px，body字體大小定義為50%，那么在body里字體大小就是1em=8px了。可當你又定義了一個div，然后把字體設置成了50%，請問，現在div下的1em等於多少？因為繼承了父級的值，現在這個div里的1em=4px，這么嵌套下去的話，抱歉，我數學不好！所有rem就出現了。
rem：是em的升級版，rem只會相對html的值，不會受到父級的影響，這樣的好處在於：從em里的例子來講，1rem始終會等於8px。使用的時候不需要重新計算rem此時的大小。rem因為是css3增加的，所以ie8或以下請無視（始終想不明白，為什么國人至今對微軟都放棄的ie這么戀戀不舍）。
以上也算是講清了他們之間的區別和關系，rem更多的運用於移動H5頁面的適配使用。
1，假設設計稿 頁面寬度是750px,那么定義1rem=100px, 750px=7.5rem.
然后如下 計算出html的font-size值。
<script type="text/javascript">
init();
window.onresize = init;
function init(){
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 7.5 + 'px';
}
</script>
2，頁面某個元素寬12px，那么可寫為0.12rem,實際值 瀏覽器會用0.12乘以html的font-size換算為實際的px值