rem 是根 em (root em)的縮寫。rem 是和根元素關聯的,不依賴當前元素。例如,無論你在文檔什麼地方使用這個單位,1.2rem 的計算值都是相等的,等於 1.2倍的根元素字號的大小。css
對於設置根元素字號大小,這裏提供兩種方式,選擇任意一種便可。html
:root { font-size: 1em; }
html 是頂層節點,html 就是咱們須要設置的根元素。以下所示,使用標籤選擇器:瀏覽器
html { font-size: 1em; }
或者是若是 html 元素有 id 或者 class 等屬性,使用其餘的選擇器也是等同的。工具
總而言之,咱們須要設置的是 html 元素的字體大小,選擇的方式不限定。字體
/* currentStyle 針對IE瀏覽器 */ function getStyle (obj, attr) { if (obj.currentStyle) { return obj.currentStyle[sttr]; } else { return getComputedStyle(obj,false)[attr]; } } var rem = getStyle(document.getElementsByTagName("html")[0], "font-size"); console.log("rem:", rem)
咱們很容易陷入這樣一種思惟方式,先把 rem 換算爲 px 單位再去思考,其實大可沒必要,直接使用 rem 思考,不用轉化爲其餘單位。讓它成爲一種習慣。設計
直接設置 rem 爲一個合理的字號默認值,能夠省去不少重複的字體樣式代碼,而不是爲了方便換算去設置 rem。code
rem 只是你工具箱中的一個,並不是全部地方都使用 rem。當你不肯定的時候,對 font-size 使用 rem,對 border 使用 px,以及對其餘大多數屬性使用 em。htm
使用媒體選擇器適配不一樣平臺,可以讓你的網頁看起來是響應式的。rem
通常瀏覽器默認值是 16px。文檔