如何使用新單位rem

手機端需加上第一條，pc無視：

1、需要先加上（手機端獲取物理裝置尺寸）

1

2

"viewport" content="width=device-width,minimum-scale=1,maximum-scale=5,user-scalable=no">    //獲取手機端物理裝置尺寸

1

2

html

演算法：（設計稿尺寸/設定的值），可根據具體稿子具體設定這個值。

如果要自適應螢幕大小，那就需要進行第三步,動態修改這個初始值！

3、接上第二步，假如設計稿是1000px寬度，要做成1000px的頁面。按第二步的演算法：（設計稿尺寸/設定的值），1000/20 = 50；

相當於把1000分成50個相同的等份，每乙份是20px，如果只是按設計比例做成相應的頁面，倒不需要處理什麼；

問題就在於：假如設計稿是1000px,而物理裝置的寬度只有500px，那在頁面上就需要整體除以一半才能做到自適應，

我們就需要動態的去修改每乙份的值.

演算法如下：

螢幕寬度 / 設計稿寬度 * html初始化的值（這裡是20），**如下：

123456

//獲取螢幕寬度改變rem設定的值

var cwidth = document.documentelement.clientwidth || document.body.clientwidth;
// console.log(cwidth);
document.documentelement.style.fontsize = (cwidth/640*20)+"px";

如何使用rem單位

最近搞移動端，真是被rem em與px的換算要了老命了，看了不少文件，似乎弄明白了，這不今天用又矇圈了。好多文件上老是說用rem就給html設定font size，用em就給body設定font size 看了下bootstrap樣式表，html body 其他樣式略哈，就講這兩個主要的。可惜大姐長...

rem單位使用法

css3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。在w3c官網上是這樣描述rem的 font size of the root element 下面我們就一起來詳細的了解rem。前面說了 em 是相對於其父元素來設定字型大小的，這樣就會存在乙個問題，進行任何元素設定，都有可能需要知...

rem 單位 和 em 單位

首先要知道 rem 和 em 是相對單位 我們通過 來看 rem 和 em的使用和區別 em 相對於父級 test 16px test test 顯示效果 我們可以看到，首先我們重置瀏覽器的預設顯示字型大小為16px 即便預設顯示大小也是16px body中的第乙個段落標籤的字型大小也就是16px ...