css rem計算

先拋出一個問題：爲何要選擇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值