css - 为什么最小宽度较小的媒体查询会覆盖较大的媒体查询？

Question

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

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

我现在正在研究媒体查询文档，但还没有能够解释这一点。

感谢您的帮助。

Answer 1

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

这通常是原因，除了不相关的创作错误，或者更糟的是，browser bugs .任何大于或等于 768px 的东西，也必然大于或等于 600px，因此它们都必须匹配。

有关更多信息，请参阅以下相关问题:

• Why does the order of media queries matter in CSS?
• What are the rules for CSS media query overlap?
• CSS specificity, Media Queries and min-width

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

那不是真的； @media 规则彼此完全独立。 @media 规则的排他性没有意义，特别是当您认为媒体查询可以包含媒体功能的任意组合时。

例如，当媒体为 (width: 600px) 和 (height: 300px) 时，在这种情况下会发生什么情况？ (正确的行为是应用每条规则，最后一条优先，因为 UA 在评估时没有其他方法可以同时考虑 width 和 height查询。)

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