CSS 字体 rem 技巧：62.5% 或 6.25%

Question

我想在 REM 中使用字体大小，在互联网上我发现了以下技巧：

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

由于设置

font-size: 62.5%;

转换

rem <-> px

（像素）非常容易（只需将像素值除以10）。

但是我想知道 - 为什么不使用值 6.25% - 在这种情况下我们的技巧将如下所示：

html { font-size: 6.25%; } 
body { font-size: 14rem; } /* =14px */
h1   { font-size: 24rem; } /* =24px */

这种方法看起来比值 62.5% 更直接（我们可以将 rem 转换为 px 而不改变数值） - 但是我有问题 - 为什么“互联网上”的人不使用这种方法 - 可能会导致一些问题（我不知道）？

Answer 1

16px 的 62.5% 是 10px，这是一个更合理的基本字体大小，可以作为不支持 rem 单位的旧浏览器的后备，例如 IE8、Firefox 3.5、Safari 4 和 Opera 11。如果您设置

font-size: 6.25%

，不理解 rem 的旧版浏览器将忽略您所有的 rem 声明，并以相同的非常小的字体看到您的整个网站，使其不可读。请记住，16 像素的 6.25%（尽管用户定义的字体大小）是

一个像素。 Google Chrome 甚至强制规定最小字体大小为 6px（默认情况下；可以通过配置更改来覆盖此设置，但不建议这样做），这实际上会干扰您的所有 rem 计算，即使它可以很好地理解 rem。

传统的 62.5% 方法没有任何问题，偏离现有方法也没有任何好处，只会带来陷阱。是的，您可以说您不支持旧版浏览器，这很好，但这并不能改变这样一个事实：使用旧版浏览器访问您网站的人将会获得不可读的体验，而使用旧版浏览器则不会发生这种情况。传统方法只是因为您（作者）希望在样式表中实现 1:1 px-to-rem 映射。

Answer 2

您可以使用 6.25% 以获得漂亮的 1:1 rem 值，然后在

font-size: 16em;

 上设置 

body

 以获得两全其美的效果。它将修复旧浏览器中的小字体问题，并且理解您的 rem 声明的浏览器将在计算大小时通过查看 

html

 的 

font-size

 来忽略它。据我所知，这样做没有任何缺点，而且实际上你会得到比 62.5% 更好的后备尺寸，但可能有一些我错过的东西，所以请谨慎使用。

Answer 3

这个答案取决于

Jon的答案，但支持更多旧浏览器。

html {
  font-size: 6.25%;
}

body {
  font-size: 1600%;
}

% 单位早于 em 单位。因此 Internet Explorer 和许多其他流行的浏览器对 % 单位的支持比 em 单位更广泛。

单位IE支持

% IE 6-10

em IE 10

雷姆IE 11

Answer 4

截至 2024 年 3 月：

为了补充其他响应，现在 98.51% 的浏览器完全支持

rem

，加上 IE 9-10，只有少数情况在编写 CSS 时可以避免 (

https://caniuse.com/?search= rem），即：不使用 font

 简写属性。

尽管如此，那时你可以尝试提供后备，例如：

:root{
  font-size: 6.25%;
}
body {
  font-size: 16em;
  font-size: 16rem;
}

话虽这么说，我已经尝试过这个想法了，因为我最初喜欢它，过了一会儿我发现了一些行为，虽然是预期的，但一开始可能并不直观（让我挠头了一段时间） 。基本上，一旦您编辑了 :root 上的

font-size

，

rem

 单位将为您提供与 上的 

em

 不同的值（或者不会与带有 

的任何其他标签的预期

em

值成比例） font-size

 默认情况下如 

<h1>

）。

我做了一个关于它的codepen：

https://codepen.io/40Detectives/pen/qBwEXVL

TLDR：即使不在元素内部，rem

也不等同于

em

。因此，您必须更加注意何时何地使用 

rem

 与 

em

。确保项目中的任何其他开发人员对此都在同一页面上，因为这可能会让他们变得复杂。

请自行决定使用。

Answer 5

您还可以使用像素 - 默认字体大小为 16px，设置 10px 作为基础允许您使用 rems，其中 1rem = 10px，因为根设置为 10px。

html { font-size: 10px}
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */