Question

我正在阅读有关最佳字体大小和布局大小调整的内容......我正在调查em而不是px。

根据我的理解，如果我像这样制作CSS;

html {
font-size: 16px;
}

body {
    font-size: 1em;
}

它会强制浏览器生成16px = 1em，这样我就可以通过计算所需的像素/ 16来做宽度和高度属性，对吗？

Answer 1

几乎所有浏览器都将其默认字体大小设置为16px。

因此，如果你只是在你的身体标签上设置font-size：100％，那么就可以从中获得成功。

这是一个很好的网站，我用它来计算基本尺寸的字体大小：

在设置标签中，只需将其更改为16px即可设置。

Answer 2

你是对的，@ Billy Moat也是。

通过在HTML元素上明确声明16px值，你并没有真正获得任何东西 - 浏览器往往会这样做。

你可以使用的另一个技巧是“62.5％”技巧。

如果您声明：

body { font-size: 62.5% }

您可以在em中进行进一步声明，以便整齐地映射到像素测量。 e.g：

h1 { font-size: 3em; /* equals 30px */ }
h2 { font-size: 2.4em; /* equals 24px */ }
.nav { width: 50.5em /* equals 505px */ }

那是因为10/16 = .625。因此，通过这个技巧，您可以重新测量您的测量值，而不必在以后处理16px基数时进行数学计算。

这种方法的唯一技巧是，一旦声明了元素的字体大小，所有子元素都必须根据父元素的值得到它们的em值（所有相对测量单位都是如此）。