弹性布局中 62.5% 字体大小的目的答案

【问题标题】：Purpose of 62.5% font-size in elastic layouts弹性布局中 62.5% 字体大小的目的
【发布时间】：2020-11-26 03:51:42
【问题描述】：

存在将正文字体设置为 62.5 % 的做法，因此 1 em 等于 10 px。众所周知，这种方法也有一些缺点。

body {
  font-size: 62.5%;
}

正如几篇文章所述，

62.5% 的技巧很常见，在两种情况下确实有其用途：

您需要更简单的数学运算，例如，如果您正在构建弹性布局 (width:30em; == width:300px;)

<...>

62.5% 黑客是一种常见的黑客，有其用途和缺点。

我只建议在你想要更简单的数学时使用它，例如，如果你正在构建一个弹性布局。

我想知道 62.5 %-trick 究竟如何帮助构建弹性布局。一些简单的例子？

【问题讨论】：

【解决方案1】：

如果您使用 rem 设置所有内边距/边距 - 这样您在 100% 浏览器缩放时知道 1rem = 10px。

【讨论】：

【解决方案2】：

这是一种摆脱基于像素的字体大小的方法。考虑在分辨率为 3840×2160 但实际上只有 13 英寸的显示器上，字体大小为 10 像素，即其宽度。一个 10px 的字符将占据三分之一英寸，这非常小且难以看到。

我的数学可能有点不对劲，但总的来说，使用非像素字体大小意味着选择字体大小与设备无关。因此，即使在 PPI 高低的显示器上，字体也始终以可读的大小显示。

【讨论】：