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

OP评论后添加:

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

再补充一点:

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

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

因此，只有媒体查询不接受 16px 以外的任何内容作为 rem 单位...