html - 媒体查询 PX vs EM vs REM

Question

谁能解释为什么我的媒体查询在将它们从 px 转换为 ems 时中断

在我的文档正文中，我包含了以下规则字体大小:62.5%，因此我假设我可以将我的媒体查询从 650px 转换为 65em？将我的媒体查询更改为 ems 会破坏布局

作为替代方案，我可以将媒体查询转换为带有像素回退的 REMS 吗？？也就是说，我不知道该怎么做

@media screen and (min-width: 650px) {     
  body {
    font-size: 62%;
    background-color: #364759;
    background-repeat: repeat-x;
    background: url("bg.gif");
  }
    
  #wrapper, footer {
    width: 80%;
    max-width: 1050px;
    margin: 0 auto;
  }
} // end media query 

非常感谢，P

Answer 1

Section 1.3 of the media queries 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, defined by the user agent or the user’s preferences, not any styling on the page.

同样，section 2说:

Unless another feature explicitly specifies that it affects the resolution of Media Queries, it is never necessary to apply a style sheet in order to evaluate expressions.

因此您的font-size: 62.5% 规则对媒体查询没有影响，1em 仍然是16px，而不是10px.

之所以会这样，是因为否则会导致循环，这是 CSS 无法处理的。试着想一想如果我们没有这个规则这个例子会做什么:

body { font-size: 10000px; }
@media (min-width: 1em) {
  body { font-size: 1px; }
}

1em 会很大，所以媒体查​​询会匹配，所以 1em 会很小，所以媒体查​​询不会匹配，所以 1em 会很大，所以...