使用 rem 设计网页

Posted 2020-12-23 webshare2020

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。