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

What are the rules for CSS media query overlap?

提问by Baumr

How do we space out media queries accurately to avoid overlap?

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

For example, if we consider the code:

例如，如果我们考虑以下代码：

@media (max-width: 20em) {
    /* for narrow viewport */
}

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

@media (min-width: 45em) {
    /* everything else */
}

What will happen, across all supporting browsers, at exactly 20em, and 45em?

在所有支持的浏览器中，恰好在 20em 和 45em 时会发生什么？

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?)

我见过人们使用：像 799px 和 800px 这样的东西，但是 799.5 px 的屏幕宽度呢？（显然不是在常规显示器上，而是在视网膜显示器上？）

I'm most curious about the answer here considering the spec.

考虑到规范，我对这里的答案很好奇。

回答by BoltClock

What are the rules for CSS media query overlap?

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

Cascade.

级联。

@mediarules are transparent to the cascade, so when two or more @mediarules match at the same time, the browser should apply the styles in all the rules that match, and resolve the cascade accordingly.¹

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

What will happen, across all supporting browsers, at exactly 20em, and 45em?

在所有支持的浏览器中，恰好在 20em 和 45em 时会发生什么？

At exactly 20em wide, your first and second media query will both match. Browsers will apply styles in both @mediarules and cascade accordingly, so if there are any conflicting rules that need to be overridden, the last-declared one wins (accounting for specific selectors, !important, etc). Likewise for the second and third media query when the viewport is exactly 45em wide.

在正好 20em 宽，您的第一个和第二个媒体查询将匹配。浏览器将在两个@media规则中应用样式并相应地级联，因此如果有任何需要覆盖的冲突规则，最后声明的规则将获胜（考虑到特定的选择器!important等）。同样对于第二个和第三个媒体查询，当视口正好是 45em 宽时。

Considering your example code, with some actual style rules added:

考虑到您的示例代码，添加了一些实际的样式规则：

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

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

When the browser viewport is exactly 20em wide, both of these media queries will return true. By the cascade, display: blockoverrides display: noneand float: leftwill apply on any element with the class .sidebar.

当浏览器视口正好是 20em 宽时，这两个媒体查询都将返回 true。通过级联，display: block覆盖display: none和float: left适用与类的任何元素.sidebar。

You can think of it as applying rules as if the media queries weren't there to begin with:

您可以将其视为应用规则，就好像媒体查询不存在一样：

.sidebar { display: none; }
.sidebar { display: block; float: left; }

Another example of how the cascade takes place when a browser matches two or more media queries can be found in this other answer.

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

Be warned, though, that if you have declarations that don'toverlap in both @mediarules, then all of those rules will apply. What happens here is a unionof the declarations in both @mediarules, not just the latter completely overruling the former... which brings us to your earlier question:

但是请注意，如果您的声明在两个规则中都不重叠@media，那么所有这些规则都将适用。这里发生的是两个规则中声明的联合@media，而不仅仅是后者完全推翻了前者......这让我们想到了你之前的问题：

How do we space out media queries accurately to avoid overlap?

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

If you wish to avoid overlap, you simply need to write media queries that are mutually exclusive.

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

Remember that the min-and max-prefixes mean "minimum inclusive" and "maximum inclusive"; this means (min-width: 20em)and (max-width: 20em)will both match a viewport that is exactly 20em wide.

请记住，min-和max-前缀的意思是“最小包含”和“最大包含”；这意味着(min-width: 20em)并且(max-width: 20em)都将匹配正好为 20em 宽的视口。

It looks like you already have an example, which brings us to your last question:

看起来您已经有了一个示例，这将我们带到您的最后一个问题：

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?)

我见过人们使用：像 799px 和 800px 这样的东西，但是 799.5 px 的屏幕宽度呢？（显然不是在常规显示器上，而是在视网膜显示器上？）

This I'm not entirely sure; all pixel values in CSS are logical pixels, and I've been hard pressed to find a browser that would report a fractional pixel value for a viewport width. I've tried experimenting with some iframes but haven't been able to come up with anything.

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

From my experiments it would seem Safari on iOS rounds all fractional pixel values to ensure that either one of max-width: 799pxand min-width: 800pxwill match, even if the viewport is really 799.5px (which apparently matches the former).

从我的实验，这似乎Safari浏览器在iOS轮所有分数像素值，以确保任何一个max-width: 799px和min-width: 800px匹配，即使视口是真的799.5px（这显然符合前）。

---

---

¹_{Although none of this is explicitly stated in either the Conditional Rules moduleor the Cascade module(the latter of which is currently slated for a rewrite), the cascade is implied to take place normally, since the spec simply says to apply styles in any and all @mediarules that match the browser or media.}

¹_{虽然在Conditional Rules 模块或Cascade 模块（后者目前计划重写）中都没有明确说明这些，但级联暗示会正常发生，因为规范只是说在任何情况下应用样式以及@media与浏览器或媒体匹配的所有规则。}

回答by Pierre-Verthume Larivière

I have tried as recommended here:

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

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

but found that this was not a good idea because it does not work on Chrome right now either on my Ubuntu desktop or on my Android phone. (as explained here: calc() not working within media queries) But, I found a better way...

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

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

and bam!

砰！

回答by Milche Patern

calc()can be use to work around this (min-width: 50em and max-width: calc(50em - 1px)will be correctly stacked), but poor browser support and i would not recommending it.

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

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

Infos:

信息：

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

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

Some others mentioned, not using the emunit would help in your queries stacking.

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