CSS媒体查询重叠的规则是什么？
我们如何精确隔离媒体查询以避免重叠？
例如，如果我们考虑代码：
@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像素？ （显然不是一般的显示，而是一个视网膜？）
考虑到这个规范，我对这个答案最好奇。
CSS媒体查询重叠的规则是什么？
级联。
@media规则对级联是透明的，所以当两个或多个@media规则同时匹配时，浏览器应该在所有匹配的规则中应用样式，并相应地parsing级联。 1
在所有支持的浏览器中，恰好20em和45em会发生什么？
在正好20em宽，您的第一个和第二个媒体查询都将匹配。 浏览器将在@media规则中应用样式并相应地进行级联，所以如果有任何需要重写的冲突规则，最后声明的规则将胜出（考虑特定的select器， !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; }
当浏览器匹配两个或多个媒体查询时，级联发生的另一个例子可以在其他答案中find。
不过要注意的是，如果你有两个@media规则中没有重叠的声明，那么所有这些规则都适用。 这里发生的是@media规则中的声明联合 ，而不仅仅是后者完全否定前者……这使我们回到你之前的问题：
我们如何精确隔离媒体查询以避免重叠？
如果你想避免重叠，你只需要编写相互排斥的媒体查询。
请记住， min-和max-前缀的含义是“最小包含”和“最大包含”; 这意味着(min-width: 20em)和(max-width: 20em)将匹配一个正好20em宽的视口。
看起来你已经有了一个例子，这引出了你的最后一个问题：
我已经看到人们使用：像799px，然后800px的东西，但屏幕宽度为799.5像素？ （显然不是一般的显示，而是一个视网膜？）
我不完全确定; CSS中的所有像素值都是逻辑像素，而且我一直很难find一个能够报告视口宽度的小数像素值的浏览器。 我尝试过一些iframe的实验，但一直没能拿出任何东西。
从我的实验来看，iOS上的Safari会将所有分数像素值max-width: 799px ，以确保max-width: 799px和min-width: 800px中的任何一个匹配，即使视口真的是799.5px（显然与前者匹配）。
1 尽pipe在条件规则模块或级联模块 （后者目前将被重写）中都没有明确说明这一点，但级联隐含通常发生，因为规范只是说在任何以及与浏览器或媒体相匹配的所有@media规则。
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
其他人提到，不使用时间单位将有助于您的查询堆叠。
