媒体查询中关于 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.

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

我的解读

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

我的问题

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

Answer 1

也许这会澄清你的理解：

1em is equal to the current font-size of the element in question. If you haven’t set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px.

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

While em is relative to the font size of its direct or nearest parent, rem is only relative to the html (root) font-size.

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

Answer 2

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

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

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

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