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）。

但是我想知道 - 为什么不使用value 6.25％ - 在这种情况下，我们的技巧将看起来像这样：

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

这种方法看起来更加直接，即值62.5％（我们可以将REM转换为PX而不会更改数字值） - 但是，我有疑问 - 为什么"在Internet上"不使用这种方法 - 可能会导致某些问题（我不知道）？

Answer 1

16px的62.5％为10px，是一个更合理的基础字体大小，可以作为不支持IE8，Firefox 3.5，Safari等旧浏览器的旧浏览器的后备4和Opera 11.如果您设置了font-size: 6.25%，则不了解REMS的较旧浏览器将忽略您的所有REM声明，并以相同的非常小的打印查看您的整个网站，从而使其无法阅读。请记住，16px（尽管有用户定义的字体尺寸）中有6.25％是一个像素。Google Chrome甚至会执行最小字体大小为6px（默认情况下；无论如何；不建议使用配置更改，但不建议将其覆盖），这实际上会干扰您所有的REM计算，即使它了解REMS很好。p>传统的62.5％的方法没有错，并且没有偏离您的方式，只有陷阱。是的，您可以说您不支持较旧的浏览器，这很好，但这并没有改变以下事实：在您的网站上发生在较旧的浏览器中的某人将获得无法读取的体验，而这不会发生传统方法仅仅是因为您，作者想要在样式表中的1：1 px-to-rem映射。

Answer 2

您可以使用6.25％，以便获得良好的1：1 rem值，然后在body上设置font-size: 16em;，以获得两全其美的最佳。它将在旧浏览器中解决微小的字体问题，并且确实了解您的REM声明的浏览器将通过在计算尺寸时查看html的font-size来忽略它。据我所知，这种方式没有缺点，而实际上您会得到比62.5％更好的尺寸后备，但是我可能会错过的东西，所以请谨慎使用。

<</p>

Answer 3

此答案取决于乔恩的答案，但支持更多的旧浏览器。

html {
  font-size: 6.25%;
}
body {
  font-size: 1600%;
}

％单位比EM单元更古老。因此，Internet Explorer和许多其他受欢迎的浏览器比EM单元更广泛地支持％单位。

IE支持单位

％IE 6-10

em IE 10

rem IE 11

Answer 4

您也可以使用像素 - 默认字体大小为16px，默认情况下，将10px设置为base允许您使用REMS，因为1REM = 10px，因为该根设置为10px。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

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