css - 如何制定基于 EM 的媒体查询

Question

我正在尝试研究如何在我的最新元素中使用 EM 媒体查询。然而，经过一些测试后，我发现媒体查询稍微有点偏离，我无法弄清楚原因。使用 parent 的字体大小而不是正文可能与它有关。我的 body 设置为 14px，我的工作结果如下:

$break-small: 22.8571em; //320px
$break-smallish: 40em; //560px
$break-med: 54.8571em; //768px
$break-medish: 68.5714em; //960px
$break-desk: 73.1428em; //1024px

正文字体大小:

body{
    font-size: 14px;
    line-height: 1.5;
    min-height: 100%;
}

*(来 self 的 SCSS 断点变量)据我所知，我做了:768/14(基本字体大小)= em 的宽度

假设我有一个名为 header 的 div，在这个 div 上没有设置 font-size，只有这个 分区。当然它仍然会使用 body font-size 吗？

Answer 1

媒体查询中的 Ems 永远不会基于 body 的字体大小，或与此相关的任何其他元素。它们总是引用用户在浏览器首选项中设置的默认字体大小。在大多数浏览器中，此默认字体大小约为 16px，在 CSS 中，这对应于 font-size 属性的初始值，即 medium。来自spec :

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.

同样的默认字体大小由根元素继承，即 html，不是 body(参见 here )。在 body 上指定相对字体大小意味着 body 将其自己的计算基于 html 的计算字体大小。话虽如此，请注意，在 html 上设置 font-size 也不会影响媒体查询中 em 的计算方式。