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

Question 1

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

例如，如果我们考虑以下代码：

@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 px呢？（显然不是在常规显示器上，而是在视网膜显示器上？）

考虑到规格，我对此最好奇。

Question 2

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

级联。

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

在所有支持的浏览器上，分别以20em和45em会发生什么？

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

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

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

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

当浏览器视口恰好为20em宽时，这两个媒体查询都将返回true。通过级联，display: block覆盖display: none和float: left适用与类的任何元素.sidebar。

您可以将其视为应用规则，就好像媒体查询并非始于此：

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

在另一个答案中，可以找到当浏览器匹配两个或多个媒体查询时如何进行级联的另一个示例。

但是请注意，如果您的声明在两个规则中都不重叠@media，那么所有这些规则都将适用。此处发生的是两个规则中声明的并集@media，而不仅仅是后者完全推翻了前者……这将我们带到您之前的问题：

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

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

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

看来您已经有一个示例，将我们带到您的最后一个问题：

我见过人们在使用：像799px然后是800px之类的东西，但是屏幕宽度为799.5 px呢？（显然不是在常规显示器上，而是在视网膜显示器上？）

我不太确定。CSS中的所有像素值都是逻辑像素，因此很难找到能够报告视口宽度小数像素值的浏览器。我尝试过尝试一些iframe，但还没有提出任何建议。

从我的实验来看，即使视口实际上是799.5px（显然与前者匹配），iOS上的Safari似乎也会舍入所有小数像素值以确保max-width: 799px和之一min-width: 800px匹配。

¹ _{尽管“条件规则”模块或“层叠”模块（目前已计划重写）中均未明确说明，但是隐含了级联正常发生的情况，因为该规范只是说要在任何样式中应用样式以及@media与浏览器或媒体匹配的所有规则。}

Question 3

我已经尝试按照这里的建议：

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

但发现这不是一个好主意，因为它目前无法在Chrome上在我的Ubuntu桌面或Android手机上运行。（如此处所述：calc（）在媒体查询中不起作用）但是，我发现了一种更好的方法...

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

和ba！

Question 4

calc()可以用于解决此问题，(min-width: 50em and max-width: calc(50em - 1px)将其正确堆叠），但浏览器支持不佳，我不建议这样做。

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

资讯：

提到的其他一些人，不使用em单位将有助于您的查询堆栈。