使用rem进行字体大小调整的主要问题是使用这些值有些困难。让我们看一个以rem单位表示的常见字体大小的示例，当然，假定基本大小为16px：

报表广告

  • 10px = 0.625rem
  • 12px = 0.75rem
  • 14px = 0.875rem
  • 16px = 1rem（基本）
  • 18px = 1.125rem
  • 20px = 1.25rem
  • 24px = 1.5rem
  • 30px = 1.875rem
  • 32px = 2rem

如我们所见，这些值对于进行计算不是很方便。因此，Snook使用了一个名为“ 62.5％ ” 的技巧。无论如何，这并不是一个新发现，因为它已经与em单元一起使用：

body { font-size:62.5%; } /* =10px */

h1 { font-size: 2.4em; } /* =24px */

p { font-size: 1.4em; } /* =14px */

li { font-size: 1.4em; } /* =14px? */

由于rem单位是相对于根元素的，因此Snook解决方案的变体变为：

html { font-size: 62.5%; } /* =10px */

body { font-size: 1.4rem; } /* =14px */

h1 { font-size: 2.4rem; } /* =24px */

一个还必须考虑其他不支持rem的浏览器。因此，上面的代码实际上是这样编写的：

html {
font-size: 62.5%;
}
body {
font-size: 14px;
font-size: 1.4rem;
}
h1 {
font-size: 24px;
font-size: 2.4rem;
}

尽管此解决方案似乎接近“黄金法则”的地位，但有人建议不要盲目使用它。哈里·罗伯茨（Harry Roberts）就使用rem单元写了自己的看法。他认为，尽管62.5％的解决方案使计算更加容易（因为其中的字体大小px是其rem值的10倍），但最终迫使开发人员显式重写其网站中的所有字体大小。

第三种观点来自CSS-Tricks的Chris Coyier。他的解决方案利用了到目前为止我们遇到的所有三个单元。他将根大小保留在中px，将模块保留在rem单位中，将元素保留在模块中，将它们保留为em。这种方法使操作全局大小变得更容易，它可以缩放模块中的类型，而模块内容是根据模块字体大小本身来缩放的。路易斯·拉扎里斯（Louis Lazaris）在CSS中的em单元的力量中讨论了后者的概念。

在下面的示例中，您可以看到Chris的方法如何：

实际上，有一些主要框架，例如Bootstrap 4和Material Design指南，这些框架使用Rem单元确定文本内容的大小。

特别要提到的是Material-UI，这是React组件非常流行的集合。它们不仅以相同的方式调整文本大小，而且还提供了一种实现我们上面提到的“ 10px简化”的机制。

最近的另一个项目Every Layout以一种非常有启发性的方式将em和rem单元结合在一起。它与Chris Coyier的模型轮廓最接近，并且使用em单位强调内联元素，例如SVG图标，跨度或其他类似元素。

如您所见，没有“银弹”解决方案。可能的组合仅受开发人员的想象力限制。

将rems与Media Query Breakpoints一起使用

在媒体查询中使用em或rem单位与“最佳行长”的概念及其对阅读体验的影响密切相关。2014年9月，《粉碎杂志》（Smashing Magazine）发表了一篇有关网页排版的综合研究报告，名为《尺寸问题：在响应式网页设计中平衡行长和字体大小》。在许多其他有趣的事情中，文章对最佳行长进行了估算：介于45到75-85个字符之间（包括空格和标点符号），其中65个为“理想”目标值。

使用1rem = 1个字符的粗略估计，我们可以采用移动优先的方法来控制单列内容的文本流：

.container {
width: 100%;
}
@media (min-width: 85rem) {
.container {
width: 65rem;
}
}

但是，关于rem和em单位用作媒体查询单位时，有一个有趣的细节：它们始终保持相同的值1rem = 1em =浏览器设置的字体大小。媒体查询规范（添加了重点）中说明了这种现象的原因：

媒体查询中的相对单位基于初始值，这意味着单位绝不会基于声明的结果。例如，在HTML中，em单位是相对于font-size的初始值的，它由用户代理或用户的首选项定义，而不是页面上的任何样式。

让我们看一下这种行为的简单示例：

在CodePen上查看媒体查询演示

首先，在HTML中，我们有一个<span>元素将在其中写入视口的宽度：

Document width: <span></span>px

接下来，我们有两个媒体查询，一个带有rem单位，另一个带有em单位（为简单起见，使用Sass）：

html {
font-size: 62.5%; /* 62.5% of 16px = 10px */
@media (min-width: 20rem) {
/* 20*16px = 320px */
background-color: lemonchiffon;
font-size: 200%;
/* 200% of 16px = 32px */
}
@media (min-width: 30em) {
/* 30*16px = 480px */
background-color: lightblue;
font-size: 300%; /* 300% of 16px = 48px */
}
}

最后，我们使用一些jQuery在页面上显示视口宽度，并在窗口大小更改时更新值：

KaTeX parse error: Expected 'EOF', got '#' at position 27: …n style="color:#̲999999">(</span…(window).width());
$(window).on(‘resize’, function(e) {
KaTeX parse error: Expected 'EOF', got '#' at position 27: …n style="color:#̲999999">(</span…(window).width());
});

我们从62.5％的技巧开始，以表明修改后的根字体大小对用于媒体查询的值没有任何影响。当我们更改浏览器窗口的宽度时，我们可以看到第一个媒体查询以320px（20×16px）开始，而第二个媒体查询以480px（30×16px）开始活动。的没有font-size我们宣布改变对断点任何影响。更改媒体查询断点值的唯一方法是在浏览器设置中修改默认字体大小。

因此，我们是否将em或rem单位用于媒体查询断点并不重要。Zurb Foundation（在撰写本文时当前为v6.5.3）在媒体查询中使用em单位。