css - CSS媒体查询重叠的规则是什么？

Question

我们如何准确地分隔媒体查询以避免重叠？

例如，如果我们考虑代码:

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

在所有支持的浏览器中，恰好在 20em 和 45em 时会发生什么？

我见过人们使用:799px 和 800px 之类的东西，但是 799.5 像素的屏幕宽度呢？ (显然不是在常规显示器上，而是在视网膜显示器上？)

考虑到规范，我最好奇这里的答案。

Answer 1

What are the rules for CSS media query overlap?

级联。

@media规则对级联是透明的，所以当两个或多个@media规则同时匹配时，浏览器应该应用所有规则中的样式匹配，并相应地解析级联。¹

What will happen, across all supporting browsers, at exactly 20em, and 45em?

在恰好 20em 宽处，您的第一个和第二个媒体查询将同时匹配。浏览器将在 @media 规则中应用样式并相应地进行级联，因此如果有任何需要覆盖的冲突规则，最后声明的规则将获胜(考虑到特定的选择器，!重要 等)。当视口(viewport)恰好为 45em 宽时，对于第二个和第三个媒体查询也是如此。

考虑到您的示例代码，添加了一些实际的样式规则:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

当浏览器视口(viewport)正好是 20em 宽时，这两个媒体查询都将返回 true。通过级联，display: block 覆盖 display: none 并且 float: left 将应用于具有类 .sidebar< 的任何元素.

您可以将其视为应用规则，就好像媒体查询不存在一样:

.sidebar { display: none; }
.sidebar { display: block; float: left; }

在 this other answer 中可以找到浏览器匹配两个或多个媒体查询时如何发生级联的另一个示例。 .

但是请注意，如果您在 @media 规则中有不重叠的声明，那么所有这些规则都将适用。这里发生的是 @media 规则中声明的联合，而不仅仅是后者完全覆盖了前者……这让我们想到了您之前的问题:

How do we space out media queries accurately to avoid overlap?

如果您希望避免重叠，您只需编写相互排斥的媒体查询即可。

请记住，min- 和 max- 前缀表示“最小包含”和“最大包含”；这意味着 (min-width: 20em) 和 (max-width: 20em) 都将匹配恰好 20em 宽的视口(viewport)。

看起来你已经有了一个例子，这让我们想到了你的最后一个问题:

I've seen people use: things like 799px and then 800px, but what about a screen width of 799.5 px? (Obviously not on a regular display, but a retina one?)

这个我不太确定； CSS 中的所有像素值都是逻辑像素，我一直很难找到一个浏览器会报告视口(viewport)宽度的小数像素值。我已经尝试使用一些 iframe 进行试验，但一直无法得出任何结果。

根据我的实验，iOS 上的 Safari 似乎会舍入所有小数像素值，以确保 max-width: 799px 和 min-width: 800px 中的任何一个匹配，即使视口(viewport)真的是 799.5px(显然与前者匹配)。

---

¹ _{虽然这些都没有在 Conditional Rules module 中明确说明或 Cascade module (后者目前计划重写)，级联被暗示正常发生，因为规范只是说在匹配浏览器或媒体的任何和所有 @media 规则中应用样式.}