CSS媒体查询重叠的规则是什么?-WhataretherulesforCSSmediaqueryoverlap?

79  

What are the rules for CSS media query overlap?

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

Cascade.

级联。

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

@media规则对于级联是透明的，因此当两个或多个@media规则同时匹配时，浏览器应该在所有匹配的规则中应用样式，并根据cascade。1解析级联

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 @media rules 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规则和cascade中应用样式，因此如果有任何冲突的规则需要重写，最后声明的规则将获胜(考虑到特定的选择器，重要的等等)。同样，当viewport恰好为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: block overrides display: none and float: left will apply on any element with the class .sidebar.

当浏览器的viewport恰好为20em宽时，这两个媒体查询都将返回true。通过级联，display: block覆盖display: none和float: left将应用于具有.侧栏类的任何元素。

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't overlap in both @media rules, then all of those rules will apply. What happens here is a union of the declarations in both @media rules, 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.

记住，最小和最大前缀表示“最小包含”和“最大包含”;这意味着(最小宽度:20em)和(最大宽度: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: 799px and min-width: 800px will match, even if the viewport is really 799.5px (which apparently matches the former).

从我的实验来看，Safari在iOS上对所有的分数像素值进行遍历，以确保最大宽度:799px和最小宽度:800px能够匹配，即使viewport真的是799.5px(显然与前者匹配)。

¹ _{Although none of this is explicitly stated in either the Conditional Rules module or 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 @media rules that match the browser or media.}

1虽然这是显式声明的条件规则模块或级联模块(后者目前定于重写),通常隐含发生级联,因为规范只是说风格适用于任何和所有@media规则匹配的浏览器或媒体。

2  

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和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
• https://developer.mozilla.org/en-US/docs/CSS/calc
• http://caniuse.com/calc
• http://caniuse.com/calc
• http://www.w3.org/TR/css3-values/#calc
• http://www.w3.org/TR/css3-values/ calc

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

有些人提到，不使用em单元将有助于查询的堆叠。