深入理解CSS中的rem单位：一种具有出色浏览器兼容性的相对大小单位，学习如何有效地使用它们。

关键要点

1. 理解rem单位: 学习CSS rem单位，它相对于根元素的字体大小，为您的UI中的字体大小和间距提供一致的方法。
2. 比较rem和em单位: 探索CSS中rem和em单位的区别，rem提供了一种更简单、更一致的大小调整方法，避免了与em单位嵌套相关的复杂性。
3. 实际应用和可访问性: 发现rem单位在响应式设计、缩放文档和确保网络可访问性方面的实际用途，允许用户根据自己的喜好调整字体大小。

什么是rem单位？

在CSS中，rem代表“root em”，这是一个测量单位，代表根元素的字体大小。这意味着1rem等于html元素的字体大小，对于大多数浏览器来说，默认值为16px。使用rem可以帮助确保整个UI中字体大小和间距的一致性。

根据W3C规范，一个rem单位的定义是：

等于根元素上font-size的计算值。当在根元素的font-size属性上指定时，rem单位指的是该属性的初始值。

rem单位与em单位

rem单位和em单位的区别在于，em单位相对于自身元素的字体大小，而不是根元素。因此，它们可能会级联并导致意外的结果。让我们考虑以下示例，我们希望列表的字体大小为12px，在根字体大小为默认16px的情况下：

html {font-size: 100%;}
ul {font-size: 0.75em;}

如果我们有一个嵌套在另一个列表中的列表，则内部列表的字体大小将是其父级大小的75%（在本例中为9px）。我们仍然可以通过使用类似以下内容来克服这个问题：

ul ul {font-size: 1em;}

这确实有效，但是我们仍然必须非常注意嵌套更深的情况。

使用rem单位，事情就简单多了：

html {font-size: 100%;}
ul {font-size: 0.75rem;}

由于所有大小都参考根字体大小，因此不再需要在单独的声明中处理嵌套情况。

使用rem单位进行字体大小调整

使用rem单位进行字体大小调整的先驱之一是Jonathan Snook，他在2011年5月发表了关于使用REM进行字体大小调整的文章。像许多其他CSS开发人员一样，他不得不面对em单位在复杂布局中带来的问题。

当时，旧版本的IE仍然占据着很大的市场份额，它们无法缩放使用像素大小的文本。但是，正如我们前面看到的，使用em单位很容易忽略嵌套并获得意外的结果。

使用rem进行字体大小调整的主要问题是这些值不太方便使用。让我们看一个用rem单位表示的一些常用字体大小的示例，当然，假设基准大小为16px：

• 10px = 0.625rem
• 12px = 0.75rem
• 14px = 0.875rem
• 16px = 1rem（基准）
• 18px = 1.125rem
• 20px = 1.25rem
• 24px = 1.5rem
• 30px = 1.875rem
• 32px = 2rem

正如我们所看到的，这些值对于进行计算来说并不方便。因此，Snook使用了一种称为“62.5%”的技巧。这绝不是一个新的发现，因为它已经被用于em单位：

body { font-size:62.5%; } /* =10px */h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px? */

由于rem单位相对于根元素，因此Snook的解决方案变为：

html { font-size: 62.5%; } /* =10px */body { font-size: 1.4rem; } /* =14px */h1 { font-size: 2.4rem; } /* =24px */

我们还必须考虑不支持rem的其他浏览器。因此，上面的代码实际上是这样编写的：

html {font-size: 62.5%;}
body {font-size: 14px;font-size: 1.4rem;}
h1 {font-size: 24px;font-size: 2.4rem;}

虽然此解决方案似乎接近“黄金法则”的地位，但有些人建议不要盲目地使用它。Harry Roberts写了他自己关于rem单位使用的看法。在他看来，虽然62.5%的解决方案使计算更容易（因为px中的字体大小是其rem值的10倍），但它最终迫使开发人员显式地重写其网站中的所有字体大小。

第三种观点来自CSS-Tricks的Chris Coyier。他的解决方案使用了我们目前遇到的所有三个单位。他保留了以px定义的根大小，以rem单位定义的模块，以及以em单位大小的模块内元素。这种方法更容易操作全局大小，这会缩放模块中的类型，而模块内容则基于模块本身的字体大小进行缩放。Louis Lazaris后来在《CSS中em单位的力量》中讨论了这个概念。

在下面的示例中，您可以看到Chris的方法是什么样的：

[CodePen示例链接 - 此处应插入CodePen的嵌入代码，但由于我无法访问外部网站，我无法提供。]

在实践中，像Bootstrap 4和Material Design指南这样的主要框架使用rem单位来调整文本内容的大小。

特别要提到的是Material-UI，这是一个非常流行的React组件集合。他们不仅以相同的方式调整文本大小，而且还提供了一种实现我们前面提到的“10px简化”的机制。

另一个最近的项目Every Layout以一种非常有创意的方式结合了em和rem单位。它最接近前面提到的Chris Coyier的模型概述，并且它使用em单位来强调内联元素，如SVG图标、span或其他类似元素。

正如您所看到的，没有“万能的”解决方案。可能的组合仅受开发人员的想象力限制。

在媒体查询断点中使用rems

在媒体查询中使用em或rem单位与“最佳行长”的概念及其对阅读体验的影响密切相关。Smashing Magazine发表了一篇关于网络排版的综合研究文章，名为《大小很重要：在响应式网页设计中平衡行长和字体大小》。在许多其他有趣的事情中，文章给出了最佳行长的估计值：45到75-85个字符之间（包括空格和标点符号），其中65是“理想”的目标值。

使用1rem = 1字符的粗略估计，我们可以控制单列内容的文本流，采用移动优先方法：

.container {width: 100%;}
@media (min-width: 85rem) {.container {width: 65rem;}}

但是，在媒体查询中用作单位时，rem和em单位有一个有趣的细节：它们始终保持1rem = 1em = 浏览器设置的字体大小的相同值。此行为的原因在媒体查询规范中进行了解释（重点突出）：

媒体查询中的相对单位基于初始值，这意味着单位从不基于声明的结果。例如，在HTML中，em单位相对于font-size的初始值，由用户代理或用户的偏好定义，而不是页面上的任何样式。

让我们快速了解一下这种行为的示例：

[CodePen示例链接 - 此处应插入CodePen的嵌入代码，但由于我无法访问外部网站，我无法提供。]

首先，在我们的HTML中，我们有一个元素，我们将在其中写入视口的宽度：

Document width: >>px

接下来，我们有两个媒体查询，一个使用rem单位，另一个使用em单位（这使用Sass是为了简单起见）：

html {font-size: 62.5%; /* 62.5% of 16px = 10px */
@media (min-width: 20rem) {/* 20*16px = 320px */background-color: lemonchiffon;font-size: 200%;/* 200% of 16px = 32px */}
@media (min-width: 30em) {/* 30*16px = 480px */background-color: lightblue;font-size: 300%; /* 300% of 16px = 48px */}}

最后，我们使用一些jQuery在页面上显示视口宽度，并在窗口大小改变时更新该值：

$('span').text($(window).width());
$(window).on('resize', function(e) {$('span').text($(window).width());});

我们从62.5%的技巧开始，以表明修改后的根字体大小对媒体查询中使用的值没有任何影响。当我们更改浏览器窗口的宽度时，我们可以看到第一个媒体查询在320px（20 × 16px）处启动，而第二个媒体查询在480px（30 × 16px）处启动。我们声明的字体大小更改对断点没有任何影响。更改媒体查询断点值的唯一方法是修改浏览器设置中的默认字体大小。

因此，在媒体查询断点中使用em或rem单位实际上并没有什么区别。Zurb Foundation（目前在撰写本文时为v6.5.3）在媒体查询中使用了em单位。

可访问性追求

我们上面已经看到，基于根字体大小进行缩放的能力使rem单位对于可访问性非常有用。Google开发人员建议使用相对单位进行文本大小调整。

互联网档案背后的工作人员进行了一项实证研究，结果表明，大量用户会更改其浏览器设置中的默认字体大小。通过使用rem和其他相对单位，您可以尊重用户关于他们希望如何浏览网页的决定。

使用rem单位缩放文档

我们可以找到rem单位的第三个用途是构建可缩放的组件。通过以rem单位表示宽度、边距和填充，可以创建与根字体大小同步增长或缩小的界面。让我们看看这个东西是如何使用几个例子工作的。

[CodePen示例链接1 - 此处应插入CodePen的嵌入代码，但由于我无法访问外部网站，我无法提供。]

[CodePen示例链接2 - 此处应插入CodePen的嵌入代码，但由于我无法访问外部网站，我无法提供。]

结论

我们在这里结束与CSS rem单位的相遇。很明显，在我们的代码中使用这些单位有很多优点，例如响应性、可伸缩性、改进的阅读体验和更大的组件定义灵活性。Rem单位不是通用的万能解决方案，但是，通过仔细部署，它们可以解决困扰开发人员多年的许多问题。这取决于我们每个人来释放rems的全部潜力。启动您的编辑器，进行实验，并与我们其他人分享您的结果。

有关CSS大小单位的更多信息，请参阅：

• 了解CSS中的长度单位
• 新的CSS3相对字体大小单位
• CSS中em单位的力量

当然，Rem不是唯一可用的CSS单位。查看我们的CSS大小单位概述。

关于CSS中Rem的常见问题解答

CSS中rem和em单位有什么区别？

CSS中rem和em单位的主要区别在于它们计算大小的参考点。em单位相对于其最近的父元素的字体大小。如果您嵌套元素，则每个级别都可能根据其父级的大小具有不同的字体大小，从而导致复合大小。另一方面，rem代表“root em”。它只相对于根元素（html），这使得它在文档中的任何位置使用都是一致的。这使得rem单位在大型CSS文件中更易于预测和管理。

如何将像素转换为CSS中的rem单位？

要将像素转换为rem单位，您需要知道文档的基准字体大小，通常为16px（大多数浏览器的默认大小）。转换公式为：目标像素值/基准字体大小=rem值。例如，如果您想要24px的字体大小，则rem中的等效值为24px/16px=1.5rem。

我可以将rem单位用于字体大小以外的属性吗？

是的，rem单位可以用于任何需要长度值的CSS属性，而不仅仅是字体大小。这包括width、height、padding、margin和line-height等属性。将rem单位用于这些属性可以帮助在不同的屏幕尺寸上保持成比例的间距和布局。

所有浏览器都支持rem单位吗？

是的，所有现代浏览器都广泛支持rem单位，包括Chrome、Firefox、Safari、Edge和Internet Explorer 9及更高版本。但是，对于不支持rem单位的旧版浏览器，您可以提供像素回退。

使用rem单位如何有利于响应式设计？

rem单位对于响应式设计非常有益。由于rem相对于根元素，因此更改根字体大小允许您调整以rem定义的所有元素的大小。这可以在媒体查询中完成，允许为不同的屏幕尺寸提供不同的字体大小，从而使您的设计具有响应性。

使用rem单位对可访问性的影响是什么？

使用rem单位可以显著提高您网站的可访问性。有些用户可能会调整其浏览器的默认字体大小以提高可读性。由于rem单位相对于此基准字体大小，它允许您的网站的布局和间距根据用户的偏好进行调整，从而改善整体用户体验。

如何覆盖以rem单位定义的样式？

您可以通过使用CSS特异性或!important规则来覆盖以rem单位定义的样式。但是，建议谨慎使用这些方法，而应以一种最大限度地减少对覆盖的需求的方式来构建您的CSS。

我可以将rem单位与其他单位（如像素或百分比）组合使用吗？

是的，rem单位可以与其他单位（如像素或百分比）组合使用。这可以为您的设计提供更大的灵活性。例如，您可以将像素用于边框宽度（不需要随文本大小缩放），并将rem单位用于填充（需要）。

如何设置rem单位的基准字体大小？

rem单位的基准字体大小是在根元素（html）上使用font-size属性设置的。例如，如果您希望基准字体大小为10px，则可以使用：html { font-size: 10px; }。然后，所有rem单位都将相对于此大小。

使用CSS中rem单位的最佳实践是什么？

在CSS中使用rem单位的一些最佳实践包括：在根元素上设置合理的基准字体大小；将rem单位用于需要随文本大小缩放的属性；为旧版浏览器提供像素回退；以及在不同的字体大小下测试您的设计，以确保它保持可访问性和视觉平衡。