html - CSS @media 查询语句级联属性是否以 em 单位指定？

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 屏幕分辨率的设备中查看页面(即:2em， 0.5em 还是 1em)？

为了更加清楚:在此上下文中，“级联”意味着将通过随后应用所有匹配案例来计算结果，即 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，因为根据通常的 CSS 规则，第二个 font-size 定义会覆盖第一个定义。

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

---

这是一个演示这一点的片段。

请注意，文本将是粗体(第一次媒体查询)、斜体(第二次媒体查询)和红色(根据通常的 CSS 规则，第二次媒体查询的定义“获胜”)。

字体大小将设置为 0.5em，因为第二个定义覆盖了第一个(NOT 1em，因为它会是如果第二个定义将累积应用于第一个定义的“顶部”)。

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

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