使用 rem 設計網頁

rem 是根 em (root em)的縮寫。rem 是和根元素關聯的,不依賴當前元素。例如,無論你在文檔什麼地方使用這個單位,1.2rem 的計算值都是相等的,等於 1.2倍的根元素字號的大小。css

1 如何聲明根元素字號大小

對於設置根元素字號大小,這裏提供兩種方式,選擇任意一種便可。html

1.1 使用僞類

:root {
    font-size: 1em;
}

1.2 選擇 html 元素

html 是頂層節點,html 就是咱們須要設置的根元素。以下所示,使用標籤選擇器:瀏覽器

html {
    font-size: 1em;
}

或者是若是 html 元素有 id 或者 class 等屬性,使用其餘的選擇器也是等同的。工具

總而言之,咱們須要設置的是 html 元素的字體大小,選擇的方式不限定。字體

2 使用原生 js 查看根元素字號

/* 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)

3 設計指南

3.1 中止使用像素去思考

咱們很容易陷入這樣一種思惟方式,先把 rem 換算爲 px 單位再去思考,其實大可沒必要,直接使用 rem 思考,不用轉化爲其餘單位。讓它成爲一種習慣。設計

3.2 設置一個合理的字號默認值

直接設置 rem 爲一個合理的字號默認值,能夠省去不少重複的字體樣式代碼,而不是爲了方便換算去設置 rem。code

3.3 並不是全部地方都使用 rem

rem 只是你工具箱中的一個,並不是全部地方都使用 rem。當你不肯定的時候,對 font-size 使用 rem,對 border 使用 px,以及對其餘大多數屬性使用 em。htm

3.4 使用媒體選擇器

使用媒體選擇器適配不一樣平臺,可以讓你的網頁看起來是響應式的。rem

3.5 瀏覽器默認字體大小參考

通常瀏覽器默認值是 16px。文檔

相關文章
相關標籤/搜索