媒体查询中对 em 的困惑答案

【问题标题】：Confusion about ems in media queries媒体查询中对 em 的困惑
【发布时间】：2021-07-30 08:29:25
【问题描述】：

一个来源

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

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

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

另一个来源

另一方面，从我读到的specs

示例 27

[…]
@media (min-width: 20em) { … }
em 的值相对于font-size 的初始值。

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

我的解释

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

我的问题

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

【问题讨论】：

标签： html css media-queries font-size

【解决方案1】：

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

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

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

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

【讨论】：

我不明白一件事。 medium 是浏览器的默认大小吗？我的意思是，如果我将浏览器的默认大小设置为 14px，那是 medium 的值吗？如果我不改变它只是放大呢？
medium 是 font-size 的 initial 值。这在 CSS 定义中。它不一定是 default 大小，可以由用户代理样式表设置，如果是，它不会影响用于媒体查询的值。但这就是我所说的精度。浏览器实际上在用户代理样式表中没有不同的设置，因此它们实际上相当于同一件事。如果您在浏览器设置中设置字体大小，那么是的，那将是介质的像素大小。缩放的效果非常复杂，可以作为一个单独的问题。

【解决方案2】：

也许这会澄清你的理解：

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

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

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

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

【讨论】：