html - em 中的媒体查询不受基本字体大小的影响

Question

我试图理解为什么设置不同的基本字体大小不会影响媒体查询的 EM 值。

它们作为默认基本字体大小为 16px，而其余内容正常 react 。

自己试试:

PX 中的媒体查询: https://jsfiddle.net/sebtp/n8x0tuvq/5/ [确定]

EM 中的媒体查询: https://jsfiddle.net/sebtp/n8x0tuvq/7/ [不对]

REM 中的媒体查询: https://jsfiddle.net/sebtp/n8x0tuvq/10/ [不对]

html {
    font-size: 62.5%; /*setting the base font size to 10px*/
}

body {
  background: white;
}
span { 
  font-size:6em; /* 60px, as it should */
}

@media only screen and (min-width: 30em) { /* 480px, should be 300px */
  body {
    background:red;
  }

 @media only screen and (min-width: 40em) { /* 640px should be 400px */
  body {
    background:cyan;
  }

  @media only screen and (min-width: 50em) { /* 800px should be 500px */
  body {
    background:yellow;
  }

Answer 1

要获得与 html 规则中定义的字体大小相关的字体大小，您必须使用 rem 单位，而不是 em。 em 相对于元素本身，如果没有字体大小定义，则相对于具有字体大小定义的父/下一个祖先(也可以在浏览器默认设置中定义，顺便说一句)。

OP 评论后的补充:

有趣:由于您以百分比定义 html 字体大小，显然浏览器继续将其内部默认设置视为根大小(它从中派生出 rem 单位)。如果您将 html 规则中的字体设置更改为 px 设置，rem 单元将相应地响应有关 font-size ，但浏览器仍继续使用其默认字体大小 (16px) 进行水平测量(至少在 Firefox 中)。看看这里(注意 12px 设置和 CSS 规则中的注释):https://jsfiddle.net/zwc00gtk/2/

再补充一点:

对于“常规”水平测量，rem 单位按预期工作，在以下示例中，浅绿色背景的 .wrap div 设置为 width: 40rem，当html中的font--size设置为12px时计算为480px，当html中的font-size设置为400px时甚至变成400px >是 62.5% (= 10px)

https://jsfiddle.net/n2dww2mt/1/

所以只有媒体查询不接受除 16px 以外的任何东西作为 rem 单位...