1em 未设置为 16px答案

【问题标题】：1em is not set as 16px1em 未设置为 16px
【发布时间】：2013-09-13 09:27:22
【问题描述】：

我正在开发一个网站，客户想要一些 0.875em 的标题。

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

尝试在开头设置body{font-size:100%}。没有运气。

如何将其放回 16px 基础？

谢谢！

【问题讨论】：

永远不要假设 1em = 16px。您只能假设 1em = 正文（或 html）元素上的浏览器默认字体大小。许多浏览器碰巧选择了 16 像素作为默认字体大小，但有些用户可以并且会调整它（通常是出于可访问性的原因）。

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

解决了问题。

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

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

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

【讨论】：