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

Question

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

例如,如果我们考虑代码:

@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像素呢？(显然不是常规显示器,而是视网膜显示器？)

考虑到规格,我对这里的答案最感兴趣.

Answer 1

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

级联.

@media规则对级联是透明的,因此当两个或多个@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; }

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

但是,请注意,如果您的声明在两个规则中都不重叠@media,那么所有这些规则都将适用.这里发生的是工会在这两个声明的@media规则,而不仅仅是后者完全推翻前......这给我们带来了你刚才的问题:

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

如果您希望避免重叠,则只需编写互斥的媒体查询.

请记住,前缀min-和max-前缀表示"最小包含"和"最大包含"; 这意味着(min-width: 20em)并且(max-width: 20em)将匹配一个正好20em宽的视口.

看起来你已经有了一个例子,它将我们带到了你的最后一个问题:

我见过人们使用:像799px然后800px的东西,但屏幕宽度为799.5像素呢？(显然不是常规显示器,而是视网膜显示器？)

我不完全确定; CSS中的所有像素值都是逻辑像素,我很难找到一个报告视口宽度的小数像素值的浏览器.我已经尝试过试验一些iframe,但却无法想出任何东西.

根据我的实验,似乎iOS上的Safari会对所有小数像素值进行舍入,以确保其中任何一个max-width: 799px和min-width: 800px将匹配,即使视口真的是799.5px(显然与前者匹配).

¹ _{虽然在条件规则模块或Cascade模块(后者目前正在进行重写)中没有明确说明这一点,但是级联隐含正常发生,因为规范只是说在任何模式中应用样式以及@media与浏览器或媒体匹配的所有规则.}

Answer 2

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

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

但发现这不是一个好主意，因为它现在在我的 Ubuntu 桌面或我的 Android 手机上都无法在 Chrome 上运行。（如此处所述：calc() 不适用于媒体查询）但是，我找到了更好的方法...

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

砰！