本文，我们将探讨 CSS 中使用 REM（Root EM）。
CSS 中 REM 是什么？
REM 代表 font size of the Root element，即 Root EM。REM 是值/数据类型长度的值。长度的另外一个值是我们老朋友 - 像素 px。每个接受长度作为值的属性都接受 REM 值。比如：margin, padding, font-size 等。
我们为什么需要考虑使用 REM 单位呢？
我们为什么要使用 REM？
在 CSS 中，有两种 CSS 长度值：绝对长度值和相对长度值。
绝对长度值
绝对长度值的例子如：px - 等于 1/96 英寸，cm - 相当于 37.8 px 或者 25.2/64 英寸。更多的内容，参考 MDN。
当你使用这些长度的时，你可以确定它们的大小始终大致相同。当你知道确切的尺寸的时候，这很有用。但是，不要忘记了，人们可能使用不同的浏览器设置，无论是基于喜好还是访问性需求的原因。
相对长度值
相对长度值是根据其他一些值参考的。也就是说要有第 1 参考值。相对长度有 REM，EM，vw 和 vh 等。
EM 的定义：
- 父元素定义的
font-size值 - 子元素相对父元素
font-size处理长度值
比如：
代码语言：javascript复制<html style="font-size: 16px">
<body>
<div style="width: 1.2em;" class="1.2em">
<div style="width: 1.4em;" class="1.4em">inner</div>
</div>
</body>
</html>我们定义了根元素的字体大小是 16px；那么，我们能获取到类名 1.2em 的长度是 16 * 1.2 = 19.2 px，获取到类名 1.4em 的长度是 16 * 1.2 * 1.4 = 26.88px。
VW 代表视窗的 1% 宽度。
比如：
代码语言：javascript复制<div class="10vw" style="width: 10vw;">10vw</div>我们定义了类名 10vw 的宽度是 10vw，该元素宽度将会是可视窗口宽度的 10%。
很明显，相对长度值有个比绝对长度值的优势：站点响应式布局。
REM 和 Root Font Size
REM 的定义和根元素的字体大小有关。该根元素可以是 :root 伪类选择器或者 html 标签选择器。
在
HTMLMDN 文档中，:root就是代指html根节点。但是有一个不同的地方 - 样式优先级，:root优先级大于html
1 rem 代表根元素的 font-size。这就意味着 1 rem 在你整个代码中都是固定的值。如果根元素的 font-size 值并未更改，则默认是 16px。如下：
html {
font-size: 18px; // 默认值是 16px
}
h1 {
font-size: 2rem; // 2 * 18px = 36px
}当然，我们也可以使用百分比更改根元素的 font-size 大小。根元素的 62.5% 等于 10px。如下：
html {
font-size: 62.5%; // 16px * 0.625 = 10px
}
h1 {
font-size: 1.8rem; // 10px * 1.8 = 18px
}为 font-size 使用 REM（或者其他相对长度）对于可访问性来说是必须的，因为当浏览器设置更改时，某些浏览器中的 px 不会调整大小。
例如，一些视力障碍人员可能需要缩放到 400% 才能看到你的文本。使用 REM 可以确保你的文本满足这些需求，因为字体大小是相对于用户选择的默认字体大小定义的（而不是浏览器默认的字体大小）。
使用 REM 响应式设计
比如 article by Adrian Sandu ：
代码语言：javascript复制html {
margin: 0;
padding: 0;
font-size: 62.5%;
}
#divOne {
width: 100%;
box-sizing: border-box;
font-size: 1.6rem;
padding: 0.5rem;
background-color: light-blue;
}
@media(min-width: 27.1875rem) { // first breakpoint: 27.1875*16px= 435px
p {
font-size: 1.6rem;
}
#divOne {
width: 41.8rem;
backround-color: yellow;
margin: auto;
}
}
@media(min-width: 40.78125rem) { // 1.5 * first breakpoint: 653px
p {
font-size: 2.4rem; // 1.5 * first breakpoint
}
#divOne {
width: 62.7rem; // 1.5 * width of first breakpoint
background-color: green;
padding: 0.75rem; // 1.5 * padding of first breakpoint
margin: auto;
}
}相信看了上面的代码，读者已经明白。
参考
- CSS REM – What is REM in CSS?
