CSS媒体查询重叠的规则是什么？ [英] What are the rules for CSS media query overlap?

问题描述

我们如何精确地规划媒体查询以避免重叠？

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 */
}

我已经看过人们使用：799像素，然后是800像素，但是屏幕上显示的是什么宽度为799.5像素？ （显然不是正常显示，而是视网膜显示）

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媒体查询的规则是什么重叠？

What are the rules for CSS media query overlap?

级联。

@media 规则对级联是透明的，因此当两个或多个 @media 规则同时匹配时，浏览器应该应用所有 ¹

@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.¹

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

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

在20em宽度，您的第一个和第二个媒体查询都匹配。浏览器将在 @media 规则中应用样式，并相应地级联，因此如果存在需要重写的任何冲突规则，则最后声明的规则获胜（考虑特定选择器，！important 等）。

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.

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

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; }
}

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

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.

您可以将其视为应用规则，好像媒体查询不是从那开始：

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.

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

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:

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

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.

记住， min - 和 max - 前缀意味着最小包含和这意味着（min-width：20em）和（max-width：20em）

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.

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

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

我已经看到人们使用：像799px然后800px，但是屏幕宽度为799.5像素呢？ （显然不是在正常显示，而是视网膜一个？）

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中的所有像素值都是逻辑像素，我一直很难找到一个浏览器，它会报告视口宽度的分数像素值。

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.

根据我的实验，iOS上的Safari会将所有分数像素值舍入为请确保 max-width：799px 和 min-width：800px 之一匹配，即使视口为真的799.5px（显然与前者匹配）。

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

¹ _{的内容在条件规则模块或级联模块（后者当前被预定用于重写），级联意味着正常发生，因为规范只是说在任何和所有 @media 规则匹配浏览器或媒体应用样式。}

¹ _{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.}

这篇关于CSS媒体查询重叠的规则是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！