使用 `rem` 进行全局大小调整；使用 `em` 进行局部大小调整

Richard Rutter 的指南 用于设置元素的 font-size 很吸引人：他认为我们应该根据元素与页面上其他元素的关系，使用 em 和 rem 单位。

以包含两段短文的引用为例。 段落之间的间距将取决于段落文本的大小，因此您可以合理地将该间距设置为 rems 或 ems。 如果您在设计过程中决定引用应该设置得更大一些，那么段落之间的间距也必须增加。 因此，段落间距与段落文本大小直接相关，因此应被视为组件内的局部大小调整。 因此，在这种情况下，您应该使用 ems。

这与 Chris 几年前描述的方法 相辅相成。

所以这是我的想法：您仍然在文档级别保留 px 大小调整，以便您可以轻松/高效地进行大范围的大小更改。 但是页面上的每个模块都设置了一个 rem 的字体大小。 实际的文本元素（h1、h2、p、li 等），如果您要对其进行大小调整，则使用 em 进行大小调整，因此它们相对于模块而言。

将它们分解一下：首先，我们将使用 px 设置文档元素的 font-size

html {
  font-size: 16px;
    
  @media screen and (min-width: 900px) {
    font-size: 18px;
  }
    
  @media screen and (min-width: 1200px) {
    font-size: 20px;
  }
}

接下来，我们将使用 em 样式化所有小的文本元素，例如段落、标题或块引用。 这是因为它们彼此之间存在关系。

h2 { 
  font-size: 2em;
}

pre {
  font-size: 0.8em;
}

最后，我们将使用 rem 样式化这些文本片段所在的模块，以便我们可以轻松地调整它们内部的所有文本。

.module {
  font-size: 1.1rem;
}

.another-module {
  font-size: 1.3rem;
}

…这最终会在实践中产生类似的效果。

查看 CodePen 上 Chris Coyier 的示例 Em AND Rem (@chriscoyier)。

我们通过这样做能实现什么？ 为什么我们不能只坚持使用 rem 或 em 来保持简单？ 嗯，通过这种方法，每个模块都立即变成独立的，并且在将来更容易进行样式化。 但是我们也可以快速调整每个模块的 font-size，而无需更改大量代码库。 如果我们注意到整个网站的 font-size 需要向上调整，则只需要更改一个值即可。

em 和 rem 值对于两种不同的工作非常有用，如果我们以其设计的方式使用它们，那么我们的工作可能会变得更容易维护和更灵活。