css - 流体布局的 Em 与 px 设置

Question

我正在阅读有关最佳字体大小和布局大小的信息……并且我正在研究 em 而不是 px。

据我了解，如果我像这样制作CSS；

html {
font-size: 16px;
}

body {
    font-size: 1em;
}

它将强制浏览器使 16px = 1em，这将使我能够通过计算所需的像素/16 来执行宽度和高度属性，对吗？

Answer 1

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

因此，如果您只是在您的 body 标签上设置 font-size:100% ，那么您将是金色的。

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

http://riddle.pl/emcalc/

在设置选项卡中，只需将其更改为 16px 即可。

Answer 2

你是对的，@Billy Moat 也是如此。

通过在 HTML 元素上显式声明 16px 值，您并没有真正获得任何收益——浏览器无论如何都倾向于这样做。

您可以使用的另一个技巧是“62.5%”技巧。

如果您声明：

body { font-size: 62.5% }

您可以在 em 中进行进一步的声明，以整齐地映射到像素测量值。例如：

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

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

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