为什么使用 em？

长期以来，我一直只使用 px 来设置文本大小。即使这样做明显不酷的时候——那些聪明人关心用 px 设置的文本在 IE 6-8 中无法调整大小的时候。我现在已经切换到使用 em 了。我还没有将所有项目都迁移过来，但我的想法已经转变了。为什么？我最终找到了一些让我现在理解的令人信服的理由。

您需要根据不同的屏幕尺寸更改字体大小

在手机屏幕上看起来不错的正文类型大小，在宽屏桌面布局上看起来就不好了。查看 Trent 的网站，这是一个很好的例子。在大型屏幕上，文本应该稍微大一些。

假设您查看样式表，发现有 50 个不同的 font-size 声明以 px 为单位。这意味着当屏幕尺寸发生变化时，您需要通过媒体查询更改这 50 个地方的字体大小。这 50 个地方都是麻烦点。

首先，对于除最庞大的网站之外的所有网站来说，50 个地方都太多了。但假设这 50 个地方都以 em 为单位。现在，通过媒体查询，您只需要更改 body 的字体大小，然后该更改会级联到整个文档中并相应地调整大小。

body {
  font-size: x-large;
}
@media (max-width: 1000px) {
  body { font-size: large; }
}
@media (max-width: 500px) {
  body { font-size: medium; }
}

无论如何，它都是任意的

尽管设备的屏幕密度不同，但它们确实试图规范“1px”的物理尺寸。真是有趣的事情。“像素”与屏幕上的真实像素无关。它实际上是 一个角度测量单位。

您可能觉得用 px 调整大小更舒服，因为您已经使用它很长时间了，但这并不意味着它更直观。您选择一个在屏幕上看起来正确的数值。它是 1.35 还是 17 有什么关系呢？

相对空间

假设您要在设计中使用图像图标。您希望能够随意地将它们应用于标题。您希望这些图标的大小与标题的大小成比例。您不能像 padding-left: 20px 那样保留空间，因为无论标题的字体大小如何，它始终都是 20px。如果将该填充设置为 em，则可以保留相对于该标题当前 font-size 的空间量。

关系

如果您全面使用 em，则可以开始使用 em 设置诸如 margin 和 padding 之类的内容。这意味着当您将 body 的 font-size 调低时，站点周围的间距也会随之降低。这将您站点的设计与排版联系起来，这是一种主要的阴阳 #协同效应。

小问题

em 仍然有一些令人讨厌的事情，比如级联。如果您决定列表项应为 font-size: 1.1em，然后嵌套列表，它将级联并增大子列表的字体大小。您可能不希望这样。您可以使用 li li { font-size: 1em; } 来修复它，但这正是那种可能会让您头疼的事情。这就是 rem 派上用场的地方，但由于浏览器支持较少（IE 9+），因此也可能很棘手。