css - 1em 未设置为 16px

Question

我在一个网站上工作，客户想要一些 0.875em 的标题。

我在网上查了一下，现代浏览器的基本 em 单位应该是 16px。好吧，如果我在 chrome developerper 中将 text-size 设置为 1em，它会设置为 12px 而不是 16px。

一开始尝试设置body{font-size:100%}。没运气。

如何将其放回 16px 基础？

谢谢！

Answer 1

那是因为 Chrome 的默认字体大小是 12px。您应该将 body 和/或 html 元素的字体大小设置为 16px，如下所示：

html, body {
    font-size: 16px;
}

这是假设没有更改此字体大小的父元素，因为 em 是与设置大小的最近父元素的相对大小。如果您想要绝对大小的字体，请检查rem，但是旧浏览器不支持此功能，因此您需要提供后备。

Answer 2

修复了问题。

em 中的字体大小是相加的。

问题是，如果基数是 16px，我将一个孩子设置为 0.875em，而另一个孩子也设置为 0.875em，那么它会将大小设置为 16px 的 0.875em 的 0.875em。

您必须将直接父级设置为您想要的确切大小。所以在我的情况下，将父级设置为 16px，以重置。然后直接子到0.875em。

Answer 3

要解决您所描述的客户请求，请设置font-size: 0.875em这些标题。想要对标题使用减小的字体大小很奇怪，但也许有一个解释。

这与您认为 1em 等于 16px 的想法无关。单位，当em用于 时font-size，代表父元素的字体大小。不多也不少。

您可能需要询问客户他们真正想要什么。