Question

假设有两个CSS @media查询，如下例所示：

@media screen and (min-width:720px) {body{font-size: 2em;}}
@media screen and (max-width:1280px) {body{font-size: 0.5em;}}

如果在具有1280 x 800屏幕分辨率的设备中查看网页（即：body，font-size或2em，则可以预期0.5em 1em ）？

为了更加清晰：在此背景下，级联＆＃39;意味着结果将通过应用所有匹配的案例来计算，即 2em * 0.5em 。

通过类比，有这样的CSS：

TEST1<div style="font-size:2em">TEST2<div style="font-size:0.5em">TEST3</div></div>

内部 TEST3 文本的font-size将为1em（2em * 0.5em = 1em，即与原始 TEST1相同< /强>）。请参阅jsfiddle：https://jsfiddle.net/bj3xsanq/2/

Answer 1

在您的示例中，字体大小最终将为0.5em，因为第二个font-size定义会根据通常的CSS规则覆盖第一个2em定义。

如果您要更改两个媒体查询的顺序，则生成的字体大小为0.5em。

这是一个演示此内容的片段。

请注意，文本将是粗体（第一媒体查询），斜体（第二媒体查询）和红色（来自第二媒体查询的定义＆＃34;胜出＆＃34;根据通常的CSS规则）。

字体大小将设置为1em，因为第二个定义会覆盖第一个定义（ NOT @media screen and (max-width:10000px) { p.styled { color: blue; font-weight: bold; font-size: 2em; } } @media screen and (min-width:1px) { p.styled { color: red; font-style: italic; font-size: 0.5em; } }，因为如果第二个定义将被应用积累＆＃34;在第一个＆＃34;在第一个＃）。

＆＃13;

<p class="styled">Text with styles from both media queries applied.</p>
<p>Text with no styles applied.</p>

＆＃13;

echo "The hostname for $(hostname) is: $(ip addr list eth1 | grep "inet " | cut -d' ' -f6 | cut -d/ -f1)"

＆＃13;

Answer 2

如果你这样做，它将是2em直到1179px：

@media screen and (min-width : 280px){
body{font-size: 2em;}
@media screen and (min-width : 1179px){
body{font-size: .5em;}}

这一切都取决于你如何宣布断点，有时奇怪的事情似乎发生，但它只是在断点声明中。我发现这种方法最先用于移动设备。

是否在em单元中指定了CSS @media查询语句级联属性？

2 个答案: