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)?

为了更加清楚：在此上下文中，'cascading' 表示将通过随后应用所有匹配案例来计算结果，即 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，即与原始文本相同测试 1)。在 jsfiddle 上查看：https://jsfiddle.net/bj3xsanq/2/

Answer 1

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

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

这里有一段演示了这一点。

请注意，文本将以粗体（第一次媒体查询）、斜体（第二次媒体查询）和红色（根据通常的 CSS 规则从第二次媒体查询 "wins" 定义） .

字体大小将设置为 0.5em，因为第二个定义覆盖了第一个（NOT 1em，如果第二个定义将累积应用第一个定义的"on top"）。

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

Answer 2

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

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

这完全取决于您如何声明断点，有时似乎会发生奇怪的事情，但这只是断点声明中的全部。我发现这种方法对于移动优先来说最简单。

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

Are CSS @media query statements cascading properties specified in em unit?

html

css

media-queries

screen-resolution