使用 rem 設計網頁

銀冰雪千載發表於2018-10-01
REM網頁

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

1 如何宣告根元素字號大小

對於設定根元素字號大小，這裡提供兩種方式，選擇任意一種即可。

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。

3.3 並非所有地方都使用 rem

rem 只是你工具箱中的一個，並非所有地方都使用 rem。當你不確定的時候，對 font-size 使用 rem，對 border 使用 px，以及對其他大多數屬性使用 em。

3.4 使用媒體選擇器

使用媒體選擇器適配不同平臺，可讓你的網頁看起來是響應式的。

3.5 瀏覽器預設字型大小參考

一般瀏覽器預設值是 16px。

相關文章