告别固定字体大小：CSS使用相对单位提升网页可访问性和兼容性

本文介绍: 在 We b 开发领域中，有很多误解流传，即使它们被反驳了很多次也仍然存在。”外部链接应该总是在新标签页中打开” 就是一个很好的例子。CSS Tr ic ks在将近十年前就对此进行了详细的解释（简而言之：大多数情况下是错误的），但它似乎仍然在某些角落中存在。案例证明：在CSS中，pxe m或 rem 单位之间没有功能上的区别的想法是一个我一遍又一遍听到的误解，因此我想在这里发帖来解决这个问题。我们要非常清楚：在CSS中使用的单位绝对很重要。并且在设置时font–size应尽可能避免使用 px。

在 Web 开发领域中，有很多误解流传，即使它们被反驳了很多次也仍然存在。”外部链接应该总是在新标签页中打开” 就是一个很好的例子。CSS Tr ic ks 在将近十年前就对此进行了详细的解释（简而言之：大多数情况下是错误的），但它似乎仍然在某些角落中存在。

案例证明：在CSS中， px ， em 或 rem 单位之间没有功能上的区别的想法是一个我一遍又一遍听到的误解，因此我想在这里发帖来解决这个问题。

我们要非常清楚：在CSS中使用的单位绝对很重要。并且在设置时 font-size 应尽可能避免使用 px 。

在我们讨论为什么应该避免使用 px 作为 font-size 之前，让我们确保我们都清楚我们正在谈论哪些单位，以及它们的一般行为。

px 是像素的缩写……虽然现在大多数情况下它不再是一个真正的像素。在显示器通常是一个相对可预测的低分辨率像素比例，比如1024×768的时代， 1px 通常等于屏幕上的一个实际像素。

然而，当高分辨率（有时称为“视网膜”）屏幕出现时，设备开始将更多的像素压缩到更小的空间中，这些物理设备像素变得非常微小。在高分辨率屏幕上浏览网页，如果CSS中的 1px 仍然对应于一个字面设备像素，那么甚至阅读任何内容都将非常困难，因为像素本身正在迅速缩小。毕竟，现代智能手机的分辨率甚至比高清电视还要高。

所以现在， 1px 通常对应于放大的“缩放”像素的大小，而不是实际硬件上的字面像素。在我们的 CSS 中， 1px 的东西可能会占用多个物理硬件像素，而我们没有任何纯 CSS 的方法来指定一个字面设备像素。但这没关系，因为它们通常太小了，我们不想去处理它们。

大多数情况下，这些并不在本讨论的语境中真正重要，但我认为了解这些还是很好的。重要的部分是：1px 等于浏览器视为单个像素的任何内容（即使在硬件屏幕上它不是真正的像素）。

这就带我们来到了 em 和 rem ，它们彼此相似。继续讲述不严格相关但仍然有趣的小知识：”em” 是一个排版术语，实际上比计算机早了几十年。在排版上，一个 em 等于当前字体大小。

如果你将字体大小设置为 32pt（“pt”是另一个仍然有时使用的旧排版术语），那么 1em 就是32pt。如果当前字体大小为 20px ，那么 1em = 20px。

在网页上，默认字体大小为 16px 。一些用户从不更改默认设置，但许多人会更改。但默认情况下， 1em 和 1rem 都将等于 16px 。

为了区分这两者：1rem 始终等于浏览器的字体大小，或者更准确地说是 html 元素的字体大小。rem 代表“根em”，而网页的根是<html>标签。因此， 1rem = document 字体大小。（默认情况下，这是 16px ，但可以被用户覆盖。）

另一方面，em是当前元素的字体大小。看下面的CSS：

.container {
  font-size: 200%;
}

p {
  font-size: 1em;
}

考虑到上述 CSS， .container 元素内的段落将会变成原来的两倍大小。这是因为 1em 表示“当前字体大小”，在 .container 内，它是200%。1em × 200% = 2em （默认为 32px ）。

然而， .container 元素外的段落仍将是 1em 的正常字体大小（默认为 16px ）。

如果我们在上面的CSS中将 em 更改为 rem ，那么所有段落标签的字体大小将始终是浏览器的默认大小，无论它们在哪里。

再次强调的误解是：既然 1em 和 16px 相等，那么选择哪个单位并不重要。这似乎是合理的；如果 16px = 1rem ，那么选择哪种方式输入似乎并不重要。

记住， em 和 rem 是相对的；默认情况下，它们都（最终）基于浏览器的字体大小。

2rem 是浏览器字体大小的两倍；0.5rem 是其一半，依此类推。因此，如果用户更改其首选字体大小，如果使用 em 和 rem ，则网站上的所有文本都会相应更改，就像应该的那样。仍然是该字体大小的两倍；0.5rem 仍然是其一半。

批判性地说，这意味着如果你的样式表使用 px 在任何地方设置 font-size ，那么基于该值的任何文本都将无法由用户更改。

即使超出 font-size ， px 的行为也与 em 和 rem 不同。

HTML CSSResult Skip Results Iframe
EDIT ON
<p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam eum aliquam eveniet.</p&gt;
<p&gt;Sapiente delectus in ab excepturi, commodi placeat quaerat saepe voluptas sunt numquam.</p&gt;
<p&gt;Rerum veniam, quidem voluptatibus deleniti nihil consequatur blanditiis explicabo eum quos. Nam.</p&gt;
<p&gt;Natus necessitatibus delectus neque tenetur sint illum obcaecati similique sequi doloribus eligendi?</p>
<p>Eos quidem iure debitis dolorum repellendus ab incidunt ipsam suscipit, autem consequuntur?</p>

p {
  border-bottom: 2px solid black;
  margin-top: 0;
  margin-bottom: 20px;
}

我们有几个段落，每个段落底部有 2px 边框，并且它们之间有 20px 边距。请注意，我们对两者都使用 px 单位。

但是请注意，如果将CSS中的 px 更改为相应的 rem 值，会发现线条和间距确实变大了！(zh-Hans)

因此，知道 em 和 rem 会随字体大小缩放，但 px 值不会，那么我们该怎么办？我们应该永远不使用 px 吗？

出于与上述所有原因相同的原因，重要的是要避免在 @media 查询中使用 px ；当用户缩放时，它将正常工作，但是使用 px 的媒体查询将在用户自己设置更大的字体大小时失败。

@media (min-width: 800px) {
  /* Changing font size does NOT affect this breakpoint */
}

@media (min-width: 50rem) {
  /* Changing font size DOES affect this breakpoint */
}