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像素呢？（显然不是一个普通显示器，但视网膜上的一个？）

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

来源

2012-11-05 Baumr

你目前的问题标题似乎不符合你的要求。这似乎是你的问题内容的第一行会更适合作为标题:) – BoltClock

@BoltClock，一如既往的感谢 - 我将它们转换;但你是如何解释“隔开媒体查询”的？ – Baumr

guess @media（...）小于或等于，大于或等于。你最好使用最大宽度的像素 – 2012-11-28 17:40:37

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

级联。

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

在所有支持的浏览器中，精确到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; }

的级联如何发生时，浏览器两个或两个以上媒体查询匹配的另一个例子被发现在this other answer。

但是，请注意，如果您在@media规则中有不是重叠的声明，则所有这些规则将适用。这里发生的是工会在@media规则的声明，不只是后者完全否定前...这将我们带到您先前的问题：

我们如何精确隔离媒体查询以避免重叠？

如果您希望避免重叠，您只需编写互斥的媒体查询。请注意，min-和max-前缀的含义是“最小包含”和“最大包含”;这意味着(min-width: 20em)和(max-width: 20em)都将匹配一个恰好为20em宽的视口。

看起来你已经有一个例子，它给我们带来了最后一个问题：

我见过的人使用：之类的东西799px，然后800像素，但对于799.5像素的屏幕宽度？（显然不是正规的显示屏，而是一个视网膜显示屏？）

这个我不完全确定; CSS中的所有像素值都是逻辑像素，并且我一直很难找到一个能够报告视口宽度的小数像素值的浏览器。我尝试过使用一些iframe，但一直没有能够拿出任何东西。

从我的实验来看，iOS上的Safari将所有分数像素值舍入以确保max-width: 799px和min-width: 800px中的任何一个匹配，即使视口真的是799.5px（显然与前者匹配）。

_{虽然没有这在明确陈述任Conditional Rules module或Cascade module（后者这是目前定于重写的），级联是隐含发生正常的，因为该规范简单地说，在任何和全部@media规则中应用样式来匹配浏览器或媒体。}

来源

2012-11-28 18:01:35 BoltClock

完成和撒粉，谢谢BoltClock！ – Baumr

@Baumr：没问题，虽然我还没有完成 - 我错过了关于重叠媒体查询的问题。我已经更新了我的答案，并且因此我称它为一个晚上。哦，只是为了踢：媒体查询是我最喜欢的CSS主题之一，但我不能忍受术语RWD;） – BoltClock

BoltClock，它可能是我第一次实际使用“RWD” - 你的冷接待已注意到，哈哈！晚安，但是当你回来时，请查看我对原始问题的更新。现在来看看你的更新...... – Baumr

calc()可用于解决此问题(min-width: 50em and max-width: calc(50em - 1px)将正确堆叠），但浏览器支持不佳，我不会推荐它。

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

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

回答

相关问题