例如，如果我们考虑代码：
@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像素呢？ (显然不是在常规显示，而是视网膜的？)
我最想知道的答案在这里考虑规范。
解决方法
What are the rules for CSS media query overlap?
级联。
@media规则对级联是透明的，因此当两个或多个@media规则同时匹配时，浏览器应该应用所有匹配的规则中的样式，并相应地解决级联1。
What will happen,across all supporting browsers,at exactly 20em,and 45em?
在正好20em宽，您的第一和第二媒体查询将匹配。浏览器将在@media规则和级联中相应应用样式，因此如果有任何需要重写的冲突规则，最后声明的规则将获胜(考虑特定的选择器，！重要的等等)。同样对于第二和第三媒体查询，当视口正好是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; }
当浏览器匹配两个或更多个媒体查询时，如何发生级联的另一示例可以在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宽的视口。
看起来你已经有一个例子，这使我们到你的最后一个问题：
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中的所有像素值都是逻辑像素，我一直很难找到一个浏览器来报告视口宽度的分数像素值。我试过试验一些iframe，但没有能够提出任何东西。
从我的实验，看起来Safari上的iOS轮廓所有分数像素值，以确保max-width：799px和min-width：800px将匹配，即使视口是真正的799.5px(显然匹配前者)。
1虽然没有一个在Conditional Rules module或Cascade module(后者是目前预定重写)中明确说明，级联意味着正常发生，因为规范只是说在任何和所有@媒体规则匹配浏览器或媒体。
