Question

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

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

亲自尝试：

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与元素本身相关，如果没有字体大小定义，则为具有字体大小定义的父/下一个祖先（也可以在浏览器默认设置BTW中定义）。

OP评论后的补充：

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

另外一个补充：

对于“常规”水平测量，rem单元按预期工作，在下面的示例中，浅绿色背景的.wrap div设置为width: 40rem，当计算为{4}时，计算为480px html中的字体大小设置为12px，当html中的字体大小为62.5%（= 10px）时，甚至变为400px

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

所以只有媒体查询才会接受16px以外的任何其他内容作为rem单元......

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

1 个答案: