媒体查询中 ems 的混淆

Question

一个来源

\n

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

\n

\n

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

\n

\n

我很想理解em媒体查询中的 s是基于浏览器的默认字体大小，如果我错了，请纠正我，否则这句话会暗示我负责要求em基于字体大小，示例代码中没有任何暗示类似的内容。

\n

另一个来源

\n

另一方面，从我读到的规格来看

\n

\n

实施例27

\n

[\xe2\x80\xa6]

\n

@media (min-width: 20em) { \xe2\x80\xa6 }\n

\n

该em值是相对于 的初始值而言的font-size。

\n

\n

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

\n

我的解读

\n

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

\n

我的问题

\n

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

\n

Answer 1

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

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

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

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