为什么具有较小最小宽度的媒体查询会覆盖较大的一个？ [英] Why does a media query with a smaller min-width overwrite a larger one?

问题描述

我试图理解为什么下面的 min-width：600 媒体查询会覆盖 min-width：768 媒体查询。

I'm trying to understand why the min-width: 600 media query below would overwrite the min-width: 768media query.

我知道600px后来的CSS文件，这可能是一个原因，但肯定只有一个应该应用，如果屏幕尺寸600或768？

I know that 600px comes later in the CSS file which could be a reason, but surely only one should only be applied if the screen size is either 600 or 768?

现在我正在查看媒体查询文档，但尚未能解释这一点。

I'm looking into media query documentation now, but have yet been able to explain this.

>

谢谢对于任何帮助。

推荐答案

我知道600px后来的CSS文件，原因

I know that 600px comes later in the CSS file which could be a reason

这通常是原因，除了不相关的创作错误，或更糟的是，浏览器错误。任何大于或等于768像素的图片都必须大于或等于600px，因此它们必须匹配。

This is usually the reason, aside from unrelated authoring mistakes or, worse, browser bugs. Anything that is greater than or equal to 768px is, by necessity, also greater than or equal to 600px, so they both have to match.

有关详情，请参阅以下相关问题：

See the following related questions for more information:

• 为什么在CSS中媒体查询的顺序很重要？


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


• CSS特性，媒体查询和最小宽度< a>

，但是只有屏幕尺寸为600或768才能应用

but surely only one should only be applied if the screen size is either 600 or 768?

这不是真的; @media 规则是完全独立的。将 @media 规则排除是没有意义的，尤其是当您认为媒体查询可以由媒体功能的任何组合组成时。

That's not true; @media rules are completely independent of one another. It doesn't make sense for @media rules to be exclusive, in particular when you consider that media queries can consist of any combination of media features.

例如，当媒体（width：600px）和（height：300px）时，会出现什么情况？ （正确的行为是应用每个规则，最后一个规则优先，因为UA没有其他方式来解释 width 和 height 。）

For example, what should happen in this case when the media is (width: 600px) and (height: 300px)? (The correct behavior is that every rule is applied, with the last one taking precedence, because there is no other way for the UA to account for both width and height when evaluating the queries.)

@media {
    body { background-color: white; }
}

@media (min-width: 600px) {
    body { background-color: red; }
}

@media (min-width: 300px) and (max-height: 300px) {
    body { background-color: yellow; }
}

@media (max-height: 600px) {
    body { background-color: blue; }
}

这篇关于为什么具有较小最小宽度的媒体查询会覆盖较大的一个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！