CSS媒体查询重叠的规则是什么？
喀斯喀特
@media规则对级联是透明的，因此当两个或多个@media规则同时匹配时，浏览器应在所有匹配的规则中应用样式，并相应地解析级联。
在所有支持的浏览器中，在20 em和45 em时会发生什么？
在精确的20 em宽，你的第一个和第二个媒体查询都将匹配。浏览器将应用@media规则中的样式并相应地级联，因此如果有任何冲突的规则需要重写，最后声明的规则将获胜（考虑特定的选择器，!important等）。同样，对于第二个和第三个媒体查询，当视口正好是45 em宽时。
考虑你的示例代码，添加了一些实际的样式规则：

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

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

当浏览器视口正好是20 em宽时，这两个媒体查询都将返回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)都将匹配恰好20 em宽的视口。
看起来你已经有了一个例子，这就引出了你的最后一个问题：
我见过人们用途：比如799 px和800 px，但是屏幕宽度是799.5px呢？（显然不是在普通显示器上，而是在视网膜上？）
这一点我不是很确定CSS中的所有像素值都是逻辑像素，我一直很难找到一个浏览器，可以报告视口宽度的分数像素值。我试过用一些iframe做实验，但没有任何结果。
从我的实验来看，iOS上的Safari似乎会对所有小数像素值进行舍入，以确保max-width: 799px和min-width: 800px中的任何一个匹配，即使视口实际上是799.5px（显然与前者匹配）。
1尽管在Conditional Rules模块或Cascade模块（后者目前正在重写）中没有明确说明这些，但级联是正常发生的，因为规范只是说要在任何和所有@media规则中应用匹配浏览器或媒体的样式。

我在这里推荐了一下：

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

但发现这不是一个好主意，因为它现在不能在Chrome上工作，无论是在我的Ubuntu桌面上还是在我的Android手机上。（如这里所解释的：calc() not working within media queries）但是，我发现了一个更好的方法.

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

然后砰！

calc()可以用来解决这个问题(min-width: 50em and max-width: calc(50em - 1px)将被正确堆叠），但浏览器支持差，我不会推荐它.

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

信息：

• https://developer.mozilla.org/en-US/docs/CSS/calc
• http://caniuse.com/calc
• http://www.w3.org/TR/css3-values/#calc

其他人提到，不使用em单元将有助于您的查询堆叠。

为了它的价值，我刚刚在MS Edge（v118.0.2088.46）中发现，当在DevTools中使用设备仿真时，选择响应维度，然后选择599px的宽度，以下媒体查询不适用：

@media (max-width: 599px) {
    ...
}

如果我将显示宽度减小到598px，或者将媒体查询的最大宽度增加到599.5px，就可以得到想要的结果。似乎是某种内部舍入问题。
在Chrome 118.0.5993.89和Firefox 118.0.2中也发现了相同的行为。

如果只有两个状态，可以使用not运算符：

@media (max-width: 20em) {
    html { background-color: red; }
}

@media not all and (max-width: 20em) {
    html { background-color: blue; }
}

注意：要使用not，需要在查询中有all。
注意：not会对整个查询求反，不考虑父项，参见：反转查询的含义