Html 媒体查询PX vs EM vs REM

有人能解释为什么我的媒体查询在从px转换到ems时会中断吗

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

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

@媒体屏幕和（最小宽度：650px）{
身体{
字体大小：62%；
背景色：#364759；
背景重复：重复-x；
背景：url（“bg.gif”）；
}
#页脚包装器{
宽度：80%；
最大宽度：1050px；
保证金：0自动；
}
}//结束媒体查询

---

非常感谢，这里有一篇很好的文章，可以帮助解释px/em/rem之间的区别

这也可能有用：

编辑

正如@Jesse Kernaghan评论说，上述链接可能很容易被破坏，我将对其进行概述。PX与EM与REM之间的差异

px

像素是一种绝对测量值，这意味着它们的大小是相同的，而与其他任何东西的大小无关。在实践中，它们并非到处都是相同的长度，因为特定设备对它们的处理方式不同，但在每个设备上，像素总是相同的<笔记本电脑显示器上的code>16px与iPad上的

16px

不同。像素是绝对的，但并不一致

em

其中，

px

是长度的绝对度量值，

em

相对于父元素的字体大小。以以下为例：

div{ font-size: 22px; }
p{ width: 200em; margin: 3em; font-size: 0.8em;}

<div>
    <p>Some text</p>
</div>

说：

媒体查询中的相对单位基于初始值，这意味着单位永远不会基于声明的结果。例如，在HTML中，em单位是相对于字体大小的初始值，由用户代理或用户的首选项定义，而不是页面上的任何样式

类似地，报告说：

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

因此，您的

font size:62.5%

规则对媒体查询没有影响，

1em

仍然是

16px

，而不是

10px

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

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

---

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

除了其他答案，请注意，

em

中为

font-size

以外的其他属性指定的长度实际上是相对于元素本身的

font-size

，即不一定是其父属性。

---

如果您在

em

中指定了填充、边距等，并且为同一个元素指定了

font size

。

问题在于媒体查询不是从正文中获取“基本大小”，而是从UA或user pref设置中获取。更改正文字体大小对媒体查询基本字体大小没有影响。谢谢大家提供了一些有用的提示，但我仍然不知道如何转换这些px媒体查询。我使用了一个升华软件包将px转换成rems（从观察结果来看，这只需除以px/16即可），这确实有效！这很奇怪，因为我的基本字体设置为62.5，所以我不知道REM转换如何不会破坏布局…@stckpete如果转到浏览器设置并将字体大小更改为18而不是16，您的计算现在又完全错误了。这就是试图设置“基本字体大小”而不是使用浏览器的预定义值的危险。你最终无法控制媒体查询将使用什么作为它的基础。我认为Justin Ober基于Chris Coyier的文章使用rem的示例代码是一个很好的建议。我想指出的是，无论何时使用em，web设计师都需要记住它们会层叠，而rem不会。Rem总是引用根元素，即html元素。我今天早些时候考虑过这一点，只是想：他们可能对此有一个规则-我在6小时后找到了答案，谢谢！

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