html5 – 媒体查询PX vs EM与REM

任何人都可以解释为什么我们的媒体查询在将其转换成px到em时会中断

在我的文件正文中,我列出了以下规则
font-size：62.5％,所以我假设我可以将我的媒体查询转换为650像素到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

解决方法

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将是巨大的,所以…