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

问题描述

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

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

@media (max-width: 20em) {/* 用于窄视口 */}@media(最小宽度:20em)和(最大宽度:45em){/* 稍宽的视口 */}@media(最小宽度:45em){/* 其他一切 */}

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

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

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

解决方案

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

级联.

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

<块引用>

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

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

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

@media (max-width: 20em) {.sidebar { 显示:无；}}@media(最小宽度:20em)和(最大宽度:45em){.sidebar { 显示:块；向左飘浮;}}

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

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

.sidebar { display: none;}.sidebar { 显示:块；向左飘浮;}

当浏览器匹配两个或多个媒体查询时级联如何发生的另一个例子可以在 这个其他答案.

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

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

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

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

看起来您已经有了一个示例，这就引出了您的最后一个问题:

<块引用>

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

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

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

<小时>

¹ _{尽管在 条件规则模块 或 Cascade模块(后者目前计划重写)，级联暗示正常发生，因为规范只是说在任何和所有@media规则中应用样式匹配浏览器或媒体.}

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?

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

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

解决方案

What are the rules for CSS media query overlap?

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

What will happen, across all supporting browsers, at exactly 20em, and 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.

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.

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:

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.

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

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.

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

---

¹ _{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屋！