关于媒体查询中的 em 的困惑

如何解决关于媒体查询中的 em 的困惑

一个来源

在 Keith J. Grant 的 CSS in Depth 中，我阅读了第 8.2 节

根据浏览器的默认字体大小（通常为 16 像素），最好在媒体查询中使用 em。

我很想知道媒体查询中的 em 基于浏览器的默认字体大小，如果我错了，请纠正我，否则这句话将暗示我有责任要求 em 基于该字体大小，而 sample code 中没有任何类似的暗示。

另一个来源

另一方面，从我读过的specs

示例 27

[…]

@media (min-width: 20em) { … }

em 值相对于 font-size 的初始值。

如果我点击那个链接，我就会看到 font-size 属性的定义，我读到它的初始值为 medium。

我的解释

• 第一个来源说 1em 查询中的 @media 是浏览器的默认字体大小；
• 第二个来源说 1em 是 initial 的 font-size 值。

我的问题

这两个消息来源说的是同一件事吗？这两个定义与 rem 单位有何关系？

解决方法

在正常情况下，1em 是一个相对单位，在 font-size 中它是相对于其父元素的 font-size 的。 medium 是绝对单位。在不同的浏览器中，它可以设置为不同的像素大小，并选择在设备上阅读起来很舒服。 medium 的常用值是 16px，但也可以选择其他值。例如，用户可能会将他们的浏览器配置为对媒体使用不同的 px 值，以便他们可以更好地阅读文本。

在媒体查询中，没有与 1em 相关的父元素。所以它取medium的初始值。

所以，是的，两个消息来源说的是同一件事，只是规格更精确一点。

rem 单位不参与其中。如果您在媒体查询中使用 rem，它也会评估为 medium。即它不会受到样式中分配给根元素的任何字体大小的影响。

,

也许这会澄清你的理解：

1em 等于相关元素的当前字体大小。如果 你没有在页面的任何地方设置字体大小，那么它将是 浏览器默认值，大概是 16px。所以默认情况下 1em = 16px。

来源：https://css-tricks.com/css-font-size/

虽然 em 与其直接或最近的父级的字体大小有关，但 rem 仅与 html（根）字体大小有关。

来源：https://j.eremy.net/confused-about-rem-and-em/