任何人都可以解释为什么我的媒体查询在将它们从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
答案 0 :(得分:17)
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会很大,所以......
答案 1 :(得分:6)
这篇很棒的文章将有助于解释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
答案 2 :(得分:2)
除了其他答案之外,请注意em
中为font-size
以外的其他属性指定的长度实际上与元素本身的font-size
相关,即不一定是其父母。
如果您在em
中指定填充,边距等,并为同一个元素指定font-size
,则会产生差异。