弹性布局中 62.5% 字体大小的用途

Question

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

body {
  font-size: 62.5%;
}

如多篇文章所述，

报价单1st article:

The 62.5% trick is a common one, and does have its uses in two circumstances:

You want simpler maths, for example if you are building an elastic layout (width:30em; == width:300px;)

<...>

引自another article：

The 62.5% Hack is a common one and has its uses and drawbacks.

I only recommend using it if you want simpler maths, for example if you are building an elastic layout.

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

Answer 1

如果您将所有 padding/margins 设置为 rem - 这样您就知道 100% 浏览器缩放时 1rem = 10px。

Answer 2

这是一种摆脱 pixel-based 字体大小的方法。考虑一个 font-size 的 10px，指的是它的宽度，在分辨率为 3840×2160 的显示器上，但显示器实际上只有 13 英寸。一个 10px 的字符将占据三分之一英寸，这是非常小的并且很难看到。

我的数学可能有点偏差，但通常使用基于 non-pixel 的字体大小意味着选择字体大小与设备无关。因此，即使在高 PPI 和低 PPI 的显示器上，字体也始终以可读的大小显示。

弹性布局中 62.5% 字体大小的用途

Purpose of 62.5% font-size in elastic layouts

html

css

font-size