Question

任何人都可以解释为什么我的媒体查询在将它们从px转换为ems

时会中断

在我的文件正文中，我已经包含以下规则 font-size：62.5％，因此我认为我可以将我的媒体查询转换为FROM 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说：

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

同样，section 2说：

除非另一个功能明确指出它会影响媒体查询的分辨率，否则无需应用样式表来评估表达式。

因此，您的font-size: 62.5%规则对媒体查询无效，1em仍然是16px，而不是10px。

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

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

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

Answer 2

这篇很棒的文章将有助于解释px / em / rem

之间的差异

https://www.futurehosting.com/blog/web-design-basics-rem-vs-em-vs-px-sizing-elements-in-css/

这也许有用： https://css-tricks.com/rems-ems/

修改

正如@Jesse Kernaghan评论的那样，上面的链接很容易被打破，我将概述。 PX与EM对REM的差异

<强> PX

像素是绝对测量值，这意味着它们的大小相同，无论其他大小如何。在实践中，它们在各处都不是相同的长度，因为特定设备对它们的处理方式不同，但是在每个设备上，像素总是相同的。笔记本电脑显示器上的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>

现在，如果您想要p元素的一半大小，则只需将周围<div>的字体大小更改为11px。

这个度量单位非常有用，因为它与响应式布局有关。

然而，em存在问题。因为所有内容都相对于父类进行了大小调整，所以em的含义会随着元素的嵌套而发生变化。如果您采用上面的示例并展开它并在<blockquote>内嵌<p> font-size 0.5em，则结果可能不是预期的结果。结果是font-size的{{1}}将等于<p>，但11px的{{1}}将再次为font-size的一半，因为{ {1}}相对于直系祖先（<blockquote>），而不是em。

<强> REM

Rems（root ems）与<p>类似，但它们始终相对于<div>元素的em。嵌套元素的深度并不重要。

<强>结论

因此，简要解释一下Chris Coyier在帖子https://css-tricks.com/rems-ems/中有一个基本概念。它基本上概述了设置基本font-size字体大小，然后使用<html>进行媒体查询调整（请记住这是绝对测量）。在这些媒体查询中调整大小你所做的就是缩小字体大小。然后使用html设置主要元素，需要使用主要元素缩放的元素使用px。 Chris Coyier的代码示例如下：

rem

Answer 3

除了其他答案之外，请注意em中为font-size以外的其他属性指定的长度实际上与元素本身的font-size相关，即不一定是其父母。如果您在em中指定填充，边距等，并为同一个元素指定font-size，则会产生差异。

媒体查询PX vs EM与REM

3 个答案: