Question

我想在REM上使用字体大小调整，在互联网上我发现trick：

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

由于设置font-size: 62.5%; coversion rem <-> px（像素）非常容易（只需将像素值除以10）。

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

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

并且这种方法看起来更直接，对于价值62.5％（我们可以将rem转换为px而不改变数值） - 但我有疑问 - 为什么人们＆＃34;在互联网上＃34;不使用这种方法 - 可能会导致一些问题（我不知道）？

Answer 1

16px的62.5％是10px，这是一个更合理的基本字体大小，可以作为不支持rem单元的旧浏览器的后备，例如IE8，Firefox 3.5，Safari 4和Opera 11。如果您设置了font-size: 6.25%，那些不了解网址的旧浏览器将会忽略您的所有报警声明，并以相同的非常小的打印件查看您的整个网站，从而使其无法读取。请记住，16px的6.25％（尽管用户定义的字体大小）是一个像素。

传统方法没有任何问题，没有任何好处可以偏离它的方式 - 只有陷阱。是的，您可以说您不支持旧版浏览器，这没关系，但这并没有改变这样一个事实，即在旧版浏览器中发生在您网站上的某个人会得到一个传统方法无法实现的难以理解的体验仅仅是因为作者想要在样式表中进行1：1 px-to-rem映射。

Answer 2

您可以使用6.25％，以便获得理想的1：1 rem值，然后将font-size: 16em;上的body设置为两全其美。它将解决旧浏览器中的微小字体问题，并且能够理解您的rem声明的浏览器将在计算尺寸时通过查看html的{{1}}来忽略它。据我所知，以这种方式进行操作没有任何弊端，实际上，与62.5％的情况相比，您可以得到更好的后备大小，但是我可能会错过一些东西，因此请谨慎使用。

Answer 3

此答案取决于 Jon's answer，但支持更多旧浏览器。

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设置为基数可以使您使用rems，其中1rem = 10px，因为根设置为10px。

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

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

4 个答案: