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

Question

一个来源

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

it's a better idea to use ems in your media queries, based on the browser's default font size (usually 16px).

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

另一个来源

另一方面，从我读到的specs

EXAMPLE 27

[…]

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

The em value is relative to the initial value of font-size.

如果我单击该链接，我将转到 font-size 属性的定义，我在其中读到它的初始值为 medium。

我的解读

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

我的问题

这两个来源说的是同一件事吗？这两个定义与rem单元有什么关系？

Answer 1

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

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

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

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