回到基础：我们应该使用 Rem、Em 还是 Pixel？

使用 Rem 和 Em 单位比使用 px 更好。

当我们使用 px 时，这意味着我们将字体大小硬编码给所有用户。用户无法更改该值。这实际上给那些想要使用比默认字体大小更大的字体的用户带来了麻烦。16px

rem 如何工作？

Rem 和 Em 是许多开发人员用来保持可访问性的相对单位。

Rem（root em）代表“根元素的字体大小”

通常，默认的根字体大小是16px。所以，如果我们看到一个 1rem 的字体大小，那么它对应的是 16px。

因为 Rem 表示根元素的字体大小，所以我们也可以像这样使用 CSS 覆盖默认值：

:root {
  font-size: 20px;
}

因为我们改变了根字体大小，现在1rem = 20px

如果我们想使用 16px 以外的值怎么办？

我们可以通过将 a 像素除以 16px 来获得 rem 值。例如，如果我们想使用 20px 的字体大小，我们会写font-size: 1.25rem。也就是 20/16。

但它太烦人了？！

是的，使用 rem 会延长开发过程，因为我们需要计算 rem 值。但这给了用户一些自由，而且我们不会干扰可访问性。

他们可以像这样改变字体大小：

它们是如何工作的？

Em 代表“父元素的字体大小”

由于 css 具有级联和可继承的特性，em 会从父元素继承 font-size 的值。例如，我们有一个父 div，里面有一个 p 标签：

<div>
  <p>hi</p>
</div>

<style>
  div {
    font-size: 0.5rem; // 8px
  }

  p {
    font-size: 1em; // ??px
  }
</style>

因为p继承了父元素的font-size，所以1em = 8px。这意味着p将会具有font-size: 8px。

是不是有点让人困惑？所以不建议使用 em 作为 font-size 的单位。

始终使用 REM 来保持字体大小一致。

我们可以在哪里使用 em 单位？

由于可继承性，em 单位对于padding和margin会很有帮助。通过使用 em，我们可以使 padding 和 margin 按比例缩放

例如，我们正在制作一个按钮。该按钮在移动设备和桌面设备上可以有不同的字体大小。我们可以在这个 codepen 上看到rem和em的区别：

可以看出，使用em可以使填充与字体大小的缩放保持比例。而使用rem可以使任何字体大小的填充值都相同。

我们真的不能再使用 px 了吗？

对我来说，对于像 font-size、padding 和 margin 这样至关重要的元素，使用 rem 和 em 会非常有效。但是，在指定 border-width 时，我仍然使用 px 值，因为我们给出的值非常小，即使更改根元素的 font-size，也几乎不会察觉到。

概括

就是这样。尽量始终使用 rem 来设置字体大小。如果需要，可以利用 em 的优势来设置比例填充。

最初发布在我的个人网站上，在我的网站上可以找到更多博客文章和代码片段库，以便于访问🚀