em中的媒体查询不受基本字体大小的影响 [英] Media queries in em not affected by the base font size

问题描述

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

它们充当默认的基本字体大小为16像素，而其余内容正常响应.

亲自尝试:

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;
  }

解决方案

要获取相对于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，当font-size时计算为480px html中的设置为12px，并且当html中的字体大小为62.5%(= 10px)时甚至变为400px

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

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

I'm trying to understand why setting a different base font size doesn't affect the EM values for the media queries.

They are acting as the default base font size is 16px, while the rest of the content reacts normally.

Try it yourself:

Media queries in PX: https://jsfiddle.net/sebtp/n8x0tuvq/5/ [OK]

Media queries in EM: https://jsfiddle.net/sebtp/n8x0tuvq/7/ [NOT OK]

Media queries in REM: https://jsfiddle.net/sebtp/n8x0tuvq/10/ [NOT OK]

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;
  }

解决方案

To get font sizes that are relative to the font-size defined in an html rule, you have to use rem units, not em. em is relative to the element itself, and if there is no font-size definition, to the parent/next ancestor which has a font-size definition (which could also be defined in the browsers default settings, BTW).

ADDITION AFTER COMMENT OF OP:

Interesting: Since you define the html font size in percent, obviously the browser continues to treat its internal default setting as the root size (from which it derives the rem unit). If you change the font-setting in the html rule to a px setting, rem units will respond accordingly concerning the font-size, but the browser still keeps using its default font size (16px) for horizontal measuring (at least in Firefox). Have a look here (watch the 12px setting and the comments in the CSS rules): https://jsfiddle.net/zwc00gtk/2/

ONE MORE ADDITION:

For "regular" horizontal measuring, the rem unit works as expected, in the following example the .wrap div with the light-green background is set to width: 40rem, which is calculated as 480px when the font--size in html is set to 12px, and even becomes 400px when font-size in htmlis 62.5% (= 10px)

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

So it's only the media queries that won't accept anything else than 16px as the rem unit...

这篇关于em中的媒体查询不受基本字体大小的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！