1em 未设置为 16px

Posted 2023-03-06

【中文标题】1em 未设置为 16px

【英文标题】：1em is not set as 16px

【发布时间】：2013-09-13 09:27:22

【问题描述】：

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

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

尝试在开头设置bodyfont-size:100%。没有运气。

如何将其放回 16px 基础？

谢谢！

【问题讨论】：

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

【参考方案1】：

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

html, body 
    font-size: 16px;

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

【讨论】：

试过了。有趣的是，如果我把它设置在别的地方，它就是 16px。

“其他地方”是什么意思？另外，请确保在设置正文字体大小后没有 CSS 重置。

描述“客户想要一些 0.875em 的标题”并不能证明以像素为单位设置任何字体大小。

"如何将其放回 16px 基数？"这是我认为他的问题的核心，也是我要解决的问题。依赖默认浏览器大小会适得其反，因为浏览器对浏览器的支持不一致。

Chrome 默认字体大小为 16px。

【参考方案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。

【讨论】：

它是乘法的。因为它将是 0.875 * 0.875 * 16px 如果你想要一个在整个页面上保持一致的单位，请使用 rem，它代表“root em”。