ATOZ CSS快速提示：REM和EM值的好处

关键要点

• 使用诸如“em”之类的相对单位来设置文本大小以及元素内外间距，比使用像素更灵活，尤其是在响应式项目中。但是，“em”单位可能会导致嵌套元素出现问题，使它们在每个嵌套级别呈指数级增长或缩小。
• “rem”单位是设置字体大小更可靠的替代方案，因为它始终基于根元素的字体大小计算。这避免了在嵌套元素中使用“em”单位时出现的指数级增长或缩小的问题。
• 对于浏览器支持，特别是对于旧版本的 Internet Explorer，可以使用 JS polyfill 或 px 备用方案。如果使用 Sass，可以创建混合宏和函数来计算所需的 rem 大小并自动提供备用方案。

本文是我们的 AtoZ CSS 系列的一部分。您可以在此处找到该系列的其他条目。您可以在此处查看其相应视频（关于 :required 伪类的视频）的完整文本和屏幕截图。

欢迎来到我们的 AtoZ CSS 系列！在本系列中，我将探索不同的 CSS 值（和属性），每个值都以字母表中的不同字母开头。我们知道有时屏幕截图是不够的，因此在本文中，我们添加了一些关于使用 rem 和 em 值的快速提示。

R 代表 rem 和 em

在最初的屏幕截图视频中，我们了解了 :required 伪类，它可用于为必须填写字段的表单设置样式。

表单、验证和样式状态是重要的主题，但我们第一次讨论 :required 时并没有遗漏太多内容。因此，让我们来看一下使用 rem 测量单位的几个快速提示。但首先，让我们来看另一种相对单位：em。

使用 em 的优缺点

在处理响应式项目时，使用 em 等相对单位来设置文本大小以及元素内外间距比使用像素更灵活。这是因为此单位相对于其父元素的字体大小，允许元素的大小、间距和文本内容随着父元素的字体大小变化而按比例增长。

使用这些相对单位，您可以构建一个比例系统，其中更改一个元素的字体大小值会对其中的子元素产生级联效应。比例系统是一件好事，但 em 的这种行为确实存在缺点。

考虑以下 HTML 代码片段：

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

这个嵌套列表并不是世界上最常见的东西，但它很可能出现在条款和条件页面或其他类型的正式文件中。

如果我们想让列表项脱颖而出，我们可以将其字体大小设置为 16px 基准大小的 1.5 倍。

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

但这会导致嵌套 li 出现问题，因为它们的大小也会是其父元素的 1.5 倍。嵌套项将是 24px 的 1.5 倍，而不是 16px 的 1.5 倍。结果是，任何嵌套列表项都会在每个嵌套级别呈指数级增长。这可能不是设计者想要的结果！

类似的问题也发生在嵌套元素和 em 值小于 1 的情况下。在这种情况下，任何嵌套项都会在每个嵌套级别不断减小。

那么我们该怎么做呢？

使用 rem 设置文本大小

为了避免字体大小不断增大或减小，我们可以使用替代单位。

我们可以使用像素，但如前所述，相对单位在响应式项目中更灵活。相反，我们可以使用 rem 单位，因为这始终基于根元素的字体大小计算，在网站或 Web 应用程序的情况下，根元素通常是 html 元素。在 .svg 或 .xml 文档中，根元素可能不同，但这些类型的文档不在我们目前的讨论范围内。

如果我们使用 rem 设置字体大小，并不意味着 em 就永远不会被使用。我倾向于使用 em 来设置元素内的填充，以便间距始终相对于文本大小。

使用 Sass 来帮助 rem 浏览器支持

rem 单位仅从 IE9 及更高版本开始支持。如果您需要支持 IE8（或更低版本），则可以使用 JS polyfill 或以以下方式提供 px 备用方案：

li {
  font-size: 1.5em; /* 24px/16px */
}

如果您使用 Sass，您可以创建一个混合宏和一个函数来计算所需的 rem 大小并自动提供备用方案。

li {
  font-size: 24px;
  font-size: 1.5rem;
}

就是这样。关于使用 rem 的一些快速提示。如果您当前的项目中没有使用它们，我强烈建议您尝试一下。

CSS 中 REM 和 EM 值的常见问题解答 (FAQ)

REM 和 EM 在 CSS 中的主要区别是什么？

CSS 中 REM 和 EM 的主要区别在于它们计算大小的参考点。EM 相对于其最近的父元素或当前元素的字体大小。这意味着如果您嵌套元素，每个元素都使用 EM 定义字体大小，则大小会复合，并可能很快变得难以控制。另一方面，REM 相对于根元素（或 html 元素）。这意味着无论元素嵌套多深，如果您使用 REM 定义其字体大小，它都将引用 html 元素的字体大小，从而在您的网站上提供一致的大小。

我应该何时在 CSS 中使用 REM 而不是 EM？

当您想要在整个网站上创建一致且可预测的大小调整时，通常使用 REM。由于 REM 相对于根元素，因此无论您的元素嵌套多深，大小调整都将保持一致。这对于构建响应式设计特别有用，在响应式设计中，一致性和可预测性至关重要。但是，当您想要创建更动态和可缩放的设计时，可以使用 EM，其中元素的大小相对于其父元素。

如何在 CSS 中将像素转换为 REM 或 EM？

要将像素转换为 REM 或 EM，您首先需要知道文档的基准字体大小。这通常在 html 元素上设置，通常为 16px，但可以是任何值。一旦知道基准字体大小，就可以通过将所需的像素值除以基准字体大小来计算 REM 或 EM 值。例如，如果您的基准字体大小为 16px，并且您想要 24px 的字体大小，则计算结果为 24 / 16 = 1.5rem 或 1.5em。

可以互换使用 REM 和 EM 单位吗？

虽然 REM 和 EM 单位都可以用于在 CSS 中定义大小，但由于它们的参考点不同，因此它们不能互换使用。REM 始终相对于根元素，而 EM 相对于最近的父元素或当前元素。这意味着相同的 REM 或 EM 值可能会产生不同的尺寸，具体取决于其使用的上下文。

浏览器兼容性如何影响 REM 和 EM 单位的使用？

REM 和 EM 单位在所有现代浏览器中都得到了很好的支持，包括 Chrome、Firefox、Safari 和 Edge。但是，如果您需要支持旧版本的 Internet Explorer（IE 8 或更早版本），则应该注意这些浏览器不支持 REM 单位。在这种情况下，您可能需要使用像素备用方案或考虑使用 EM 单位，后者具有更广泛的浏览器支持。

REM 和 EM 单位如何影响辅助功能？

REM 和 EM 单位可以通过使其更易于缩放和响应用户设置来极大地增强您网站的辅助功能。由于这些单位是相对的，因此它们允许用户根据自己的偏好调整基准字体大小，而不会破坏布局。这对于可能需要增加字体大小以提高可读性的视力障碍用户尤其有益。

使用 REM 和 EM 单位的最佳实践是什么？

一种最佳实践是使用 REM 单位来定义字体大小、边距和填充，以确保整个网站的一致性。您可以将 EM 单位用于需要与其父元素一起缩放的元素，例如下拉菜单或工具提示。在 html 元素上以百分比定义基准字体大小也是一个好主意，这允许用户根据自己的偏好调整基准字体大小。

REM 和 EM 单位如何与媒体查询配合使用？

REM 和 EM 单位可以像其他任何单位一样在媒体查询中使用。但是，由于这些单位是相对的，因此它们可以使您的媒体查询更灵活且更具响应性。例如，如果您使用 EM 单位定义断点，它们将随着基准字体大小而缩放，从而允许您的布局适应用户设置。

我可以将 REM 和 EM 单位用于文本以外的元素吗？

是的，REM 和 EM 单位可以用于 CSS 中的任何大小定义，而不仅仅是文本。这包括宽度、高度、填充、边距、边框宽度，甚至定位。将 REM 和 EM 单位用于这些属性可以使您的布局更灵活且更具响应性。

使用 EM 单位时如何处理嵌套元素？

使用 EM 单位时，嵌套元素可能会成为一个挑战，因为大小会复合。处理此问题的一种方法是将嵌套元素的字体大小重置为 1em，这将使其等于其父元素的字体大小。或者，您可以对嵌套元素使用 REM 单位，以确保大小调整的一致性。

以上是ATOZ CSS快速提示：REM和EM值的好处的详细内容。更多信息请关注PHP中文网其他相关文章！