媒体查询PX vs EM vs REM [英] Media queries PX vs EM vs REM

问题描述

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

Can anyone explain why my media queries break when converting them FROM px TO ems

在我的文档正文中，我包括以下规则
font-size：62.5％，因此我假设我可以将我的媒体查询转换为FROM 650px到65em？将媒体查询更改为ems会破坏布局

In the body of my document, I have included the following rule font-size: 62.5%, Therefore I would assume that I could convert my media query to FROM 650px to 65em? Changing my media queries to ems breaks the layout

另一种方法是，我可以将媒体查询转换为REMS吗？

As an alternative, can I convert the media query to REMS with a pixel fallback ?? that said, I have no idea how to do this

@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>

推荐答案

媒体查询规范的第1.3节说：

Section 1.3 of the media queries spec says:

媒体查询中的相对单位基于初始值，单位从不基于声明的结果。例如，在HTML中，em单位相对于font-size的初始值，由用户代理或用户的首选项定义，而不是页面上的任何样式。

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.

同样，部分2 说： / p>

Similarly, the section 2 says:

除非另一个功能明确指定它影响媒体查询的分辨率，否则不必应用样式表来计算表达式。

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 。

So your font-size: 62.5% rule has no effect with regards to media queries, and 1em is still 16px, not 10px.

这样做的原因是否则会导致循环，这是CSS无法处理的。尝试想想，如果我们没有这个规则，这个例子会做什么：

The reason things are this way is that doing otherwise would cause loops, which is something CSS cannot deal with. Try to think of what this example would do if we didn't have this rule:

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

1em将是巨大的，所以媒体查​​询会匹配，所以1em是小的，所以媒体查​​询将不匹配，所以1em将是巨大的，所以...

1em would be gigantic, so the media query would match, so 1em would be small, so the media query wouldn't match, so 1em would be gigantic, so...

这篇关于媒体查询PX vs EM vs REM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！