如何在 CSS 中使用 rem 单位实现可访问性设计

作为网页设计师，您的主要职责之一是创建无论用户使用何种设备都能轻松阅读的网站。传统方法，如使用像素为字体大小设置，会根据观看者的设备或个人偏好设置文本的恒定大小。然而，这对于有视觉障碍的用户来说可能是非常具有挑战性的，因为他们无法将文本调整到舒适的大小。

这就是相对 CSS 单位如‘rem’和’em’的用武之地。它们允许字体大小根据用户设置或其他元素进行缩放，提高了网站的适应性。

本指南将探讨 CSS 中的 rem 单位，提供它们与固定单位不同的详细解释，并展示您如何使用它们来创建更具可访问性的网络环境。

Em 与 rem 与 px：选择正确的 CSS 单位

在设计网页时，CSS 允许您使用不同类型的单位来定义字体大小。每种单位类型，无论是绝对单位如像素 (px) 还是相对单位如 em 和 rem，都具有特定的用途和对网站可访问性和设计适应性的影响：

像素 (px) 是绝对单位，指定了不考虑用户设备大小或浏览器设置的确切大小。由于像素不会根据用户的查看偏好进行调整，它们可能限制了可访问性。例如，如果用户需要较大的文本才能舒适地阅读，像素不会自动缩放以满足这一需求。以下是一个设置像素字体大小的示例：

body {
  font-size: 16px;
}

百分比 是相对单位，根据它们的父元素或该元素内的特定属性来定义大小。这个单位多功能，但通常用于管理元素的宽度和高度。当用于字体大小时，大小相对于父元素的字体大小进行调整。以下是使用百分比设置 div 宽度的方法：

.container {
  width: 75%;
}

Em 单位 相对于其父元素的字体大小进行缩放。这个特性可能导致嵌套元素中的累积效应，其中嵌套元素的字体大小基于从父元素继承的大小而增加。如果管理得当，这可能是一个强大的工具，也是一个挑战。
Rem 单位 (root-em) 相对于根元素的字体大小进行缩放，通常是元素。这使它们对于可访问性特别有用，因为用户可以在他们的浏览器偏好中设置默认字体大小，rem 单位将尊重这一点。这确保了网站能够适当地缩放到用户的设置。

🔎 请注意： 这是这些单位在大多数桌面浏览器中的行为方式，但移动浏览器遵循不同的规则。如果您想了解更多，请查看这篇文章，它解释了不同浏览器缩放文本的特殊方式。

为了帮助您更好地理解，这里有一些示例：

⚠️ 本文中的代码片段仅用于演示目的。您永远不应该在 html、body 或根元素中设置任何字体大小。这将对您网站的可访问性产生负面影响。 虽然在根元素上设置字体大小在一致性和计算便利性方面可能有好处，但通常认为最好不要覆盖默认的浏览器设置，以尊重用户偏好并增强可访问性。相反，通常建议使用 em 和 rem 这样的相对单位而不改变根字体大小，以创建更灵活和用户友好的设计。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <style>
    html {
      font-size: 16px; /* 默认基础字体大小为 16px */
    }

    body { /* 仅供演示目的。永远不要在 html、body 或根元素中设置任何字体大小。这将对您网站的可访问性产生负面影响。 */

      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
    }

    .example {
      margin-bottom: 20px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    .px-example {
      font-size: 20px; /* 绝对单位，在嵌套元素中不会改变 */
    }

    .em-example {
      font-size: 2em; /* 相对于父元素的字体大小 */
    }

    .rem-example {
      font-size: 2rem; /* 相对于根元素的字体大小，在嵌套元素中不会改变 */
    }
  </style>
  <body>
    <div class="container">
      <h2>字体大小比较</h2>

      <h3>px 示例</h3>
      <div class="example px-example">
        <p>这段文本使用 <strong>20px</strong> 样式。</p>
        <div class="px-example">
          <p>嵌套：仍然是 <strong>20px</strong>。</p>
        </div>
      </div>

      <h3>em 示例</h3>
      <div class="example em-example">
        <p>这段文本使用 <strong>2em</strong> 样式。</p>
        <div class="em-example">
          <p>嵌套：增加到 <strong>4em</strong>。</p>
          <div class="em-example">
            <p>进一步嵌套：增加到 <strong>8em</strong>。</p>
          </div>
        </div>
      </div>

      <h3>rem 示例</h3>
      <div class="example rem-example">
        <p>这段文本使用 <strong>2rem</strong> 样式。</p>
        <div class="rem-example">
          <p>嵌套：仍然是 <strong>2rem</strong>。</p>
        </div>
      </div>
    </div>
  </body>
</html>

px 示例

px 单位是绝对单位，无论嵌套如何，都保持一致。嵌套的 px 示例显示，在嵌套元素中字体大小保持不变。

⚠️ 这就是为什么您应该 永远不要 在 html 元素上设置像素文本大小。这将阻止用户样式表的工作。如果您在样式表中将文本大小设置为 32px，然后将 html 元素设置为 16px 像素，文本将再次变小。

em 示例 – 从 2em 增加到 8em

由于 em 单位是相对于其父元素的字体大小，这可能导致累积效应，其中每个嵌套元素的字体大小由父元素的字体大小乘以。

rem 示例

如您所见，rem 单位在嵌套时没有改变，因为 rem 总是相对于文档根元素的字体大小，始终是 HTML 元素，而不是其父元素的字体大小。这是区分 rem 和 em 的关键特性。

然而，如果用户由于可访问性需求（如视觉障碍）调整了他们的浏览器设置以获得更大或更小的文本，网页上的 rem 尺寸元素将相应地缩放。

如果用户出于可访问性原因在他们的浏览器中设置了更大的默认字体大小，那么使用 em 或 rem 尺寸的元素将相应地缩放，从而尊重用户的需求。

记住 px 不会根据用户设置而改变。 如果一个网站仅使用 px 设计，它可能不会很好地响应用户对较大文本的偏好，可能使网站对有视觉障碍的用户不太可访问。

选择正确的 CSS 单位取决于您的项目和受众的具体需求。像素提供精确度，百分比提供布局设计的灵活性，ems 提供上下文敏感的尺寸调整，rems 提供出色的可扩展性和可访问性。

使用 rem 单位的好处

采用像百分比、ems 或 rems 这样的相对单位对于响应式和可访问的网页是至关重要的，因为它们确保内容可以适应不同的设备。

根据 WCAG 2.2 SC 1.4.4 调整文本大小，文本应该可以在不使用辅助技术的情况下调整大小到 200%，以便用户不会丢失内容或功能。这是可访问设计中 POUR 原则的主要思想之一。

POUR 缩写的视觉表现 – 可感知、可操作、可理解、健壮。

Rem 单位为响应式和可访问的网页设计提供了几个特定优势：

响应式设计： Rem 单位允许基于单一根字体大小动态缩放，简化了在各种设备上创建一致的视觉体验的过程。通过在 CSS 文件中设置字体大小，所有基于 rem 的大小按比例调整，增强了布局的灵活性。
可访问性： Rem 单位特别有益于那些调整浏览器设置以获取较大文本的用户，因为这些单位根据用户定义的偏好进行缩放。这一特性支持可访问设计的原则，使内容对每个人都可读和可导航。
模块化和可扩展性： 使用 rem 单位更容易在网站的不同部分保持设计一致性。它们有助于构建更有结构和模块化的代码库，其中可扩展性和更新管理得更有效。
降低累积布局偏移 (CLS)： 使用 rem 单位进行文本尺寸调整也可以减少页面加载期间的布局偏移可能性，而不是使用 ch 单位。

实践中 rem 单位在 CSS 中的有效使用

以下是一些在 CSS 中有效使用 rem 单位的方法：

字体尺寸

使用 rem 单位进行字体大小设置，确保文本根据用户默认设置进行缩放，增强可访问性。这种方法尊重根元素上设置的基础字体大小，通常是

标签。

h1 {
  font-size: 2rem; /* 32px */
}

媒体查询

在媒体查询中，rem 单位提供了一种相对于固定像素值调整设计元素的方法。这种方法允许在不同的断点处实现更流畅的布局转换。

@media (min-width: 48rem) { /* 768px */
  body {
    font-size: 1.25rem; /* 20px */
  }
}

可缩放矢量图形 (SVG)

Rem 单位在 SVG 中也很有用，用于需要与其他页面元素一起缩放的图形。这确保了图形在不同尺寸下保持比例和清晰度。

svg {
  width: 5rem; /* 80px */
  height: 5rem; /* 80px */
}

排版中的垂直节奏

在排版中创建垂直节奏对网页设计和可读性都有益。它涉及建立网页上不同元素之间的一致间距，以创建和谐且视觉上吸引人的内容流。

垂直节奏确保文本行和其他元素之间的空间遵循可预测的模式，使内容更易于阅读，外观上也更令人愉悦。以下是一个示例：

h2 + * {
  margin-block-start: 0.5rem;
}
p + * {
  margin-block-start: 1.5rem;
}

h2 + * 选择器针对的是紧接在 <h2> 元素之后的所有元素。+ 是相邻兄弟组合器，意味着它只选择紧接在 <h2> 之后的第一个兄弟元素。同样，p + * 选择器针对的是紧接在 <p> 元素之后的所有元素。

margin-block-start 设置块的起始边距，在自上而下的写作模式（如英语）中是上边距。

开始您的可访问性设计之旅

Rem 单位对于创建可扩展和以用户为中心的布局至关重要，这对于包容性的数字环境是必不可少的。它们有助于增强用户体验，并确保您的网站满足可访问性标准和法规，使您的内容能够被更广泛的受众访问。

💻 作为更高级的话题，使用流体类型比例将使排版适应性地平滑地适应不同的屏幕尺寸和设备。而不是使用固定的断点，流体类型比例允许文本元素轻松调整，确保整个设计的视觉和谐和一致性。这种方法是更广泛的流体响应设计概念的一部分，旨在创建更灵活和适应性的用户体验。

将 rem 单位整合到您的设计中是很好的，但如果您想构建一个真正可访问的网站，您需要不断学习。A11y Collective 提供了丰富的资源，专为渴望拥抱可访问设计的站点所有者、设计师和开发人员量身定制。我们的 “Accessible Code” 课程特别设计，以在 CSS 单位如 rem 的实际理解基础上进一步扩展。

通过报名参加 A11y Collective 的 “Accessible Code” 课程，继续增强您对可访问网页设计的技能和理解。