谁能解释为什么我的媒体查询在将它们从 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
最佳答案
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 会很大,所以...
关于html - 媒体查询 PX vs EM vs REM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29686099/