问题描述
一个来源
在 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。
我的解释
我的问题
这两个消息来源说的是同一件事吗？这两个定义与 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（根）字体大小有关。