【CSS in Depth 2 精译_012】2.2.2 使用 rem 设置字号

安冬的码畜日常

已于 2024-07-17 16:02:14 修改

阅读量744

点赞数 23

分类专栏： CSS in Depth 2 文章标签： css 前端

于 2024-06-28 22:28:59 首次发布

本文链接：https://blog.csdn.net/frgod/article/details/140054085

版权

CSS in Depth 2 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

当前内容所在位置

第一章层叠、优先级与继承
第二章相对单位
2.1 相对单位的威力
2.1.1 响应式设计的兴起

2.2 em 与 rem
2.2.1 使用 em 定义字号
2.2.2 使用 rem 设置字号 ✔️

2.3 告别像素思维
2.4 视口的相对单位
2.5 无单位的数值与行高
2.6 自定义属性
2.7 本章小结

2.2.2 使用 `rem` 设置字号

当浏览器解析 HTML 文档时，会在内存里创建一个包含页面所有元素的模型结构，称为 DOM（Document Object Model，即文档对象模型）。它是一个树形结构，其中的每个元素都由一个对应的节点表示。<html> 元素是顶级（根）节点。在它下面是子节点 <head> 和 <body>。再往下是它们的子节点，以及子节点的子节点，逐级嵌套，依此类推。

根节点是 HTML 文档中所有其他元素的祖先节点。根节点有一个伪类选择器（:root）以供选中。它等价于类型选择器（type selector）html，但 :root 的优先级相当于一个类选择器，而非标签选择器。

rem 是“root em”的缩写。rem 不是基于当前元素，而是一个相对于根元素的单位制。无论在文档的任意位置使用 rem，1.2rem 都只有一个相同的计算值：1.2 倍根元素的字号。代码清单 2.8 设置了根节点的字号，并通过 rem 定义了无序列表的相对字号。

代码清单 2.8 使用 rem 指定字号

:root { /* 伪类 :root 在效果上相当于标签选择器 HTML */
  font-size: 1em; /* 使用浏览器的默认字号 16px */
}
ul {
  font-size: 0.8rem;
}

本例中，根节点的字号为浏览器默认的 16px（根元素上的一个单位 em 是相对于浏览器的默认值字号而言的）。无序列表的字号设为 0.8rem，其计算机则为 12.8px。因为相对根节点，所有字号将始终保持一致，嵌套列表也不例外。

rem 大大降低了因使用 em 引入的复杂度。实际上，rem 综合了像素 px 和相对单位 em 的优点，既发挥出了相对单位的优势，又简单易用。如此说来，是不是可以全用 rem 而抛弃其他单位呢？答案显然是否定的。

别忘了，CSS 的答案通常都是“看情况”。rem 也只是工具包中的一种工具而已。掌握 CSS 很重要的一点是学会因地制宜地使用适当的工具（when to use which tool）。我一般会用 rem 设置字号，用像素设置边框，再用 em 和 rem 设置其他大部分属性，尤其是 padding（内边距）、margin（外边距）以及圆角半径（border radius）。

这样一来，字号就是可预测的，就算其他因素改变了元素的字号，仍然可以借助 em 的强大威力实现内外边距的同步缩放。用像素设置的边框也特别好用，尤其是想要一个好看又精致的直线效果时。这些是我在设计各种样式时的处理单位问题的首选方案——尽管我的个人偏好也随时间及项目而变化。然而它们仅仅是工具，在某些情况下，换个工具可能效果会更好。

小贴士

拿不准的时候，就用 rem 设置字号，用 px 设置边框，再用 em 或 rem 设置其他大部分样式属性（property）。

可访问性：对字号使用相对单位

一些浏览器为用户提供了两种方式来设置字体大小：页面缩放和设置浏览器默认字号。按住 Ctrl + + 或 Ctrl + - 或者在苹果 Mac 电脑使用 Cmd + +/- 就能缩放网页。该操作会缩放所有文字与图片，从而让网页整体放大或缩小。而在另一些浏览器中，这些变更只会临时对当前标签页生效，不会将其同步到新的标签页。

而第二种方式——设置默认字号则不太一样。默认字号通常是在浏览器的设置页操作，这样设置的字号会永久生效，除非用户再次进行修改。这种方式的缺点是，对于用 px 或其他绝对单位设置字号的网页，用户手动设置的浏览器默认字号将会失效。由于默认字号对于某些用户而言至关重要，尤其是视力受损人士，因此应该始终优先考虑通过相对单位或百分比来设置字号。

刚开始使用像素单位可能更容易上手，也更好理解；但如果花时间熟悉相对单位 rem，您就会拥有更广泛更丰富的工具选择，同时也可以创建出可访问性更好的无障碍页面。