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

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) and (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; }
}

Answer 2

你们的媒体查询都没有下限。这意味着两者都将应用于从 0px 到 600px or 768px。

因此，当您低于 600px 时，两者都会加载，但只会应用一个。媒体查询的顺序是关键。 之后的规则将覆盖之前的规则。

如果你想把它具体化以减少混淆。只需将 limits/range 放入它即可：

@media (min-width: 600px) and (max-width: 768px){
  ...
}

Answer 3

600 像素规则适用于 600 像素或更大的任何内容。如果您不希望 600px 覆盖 768px，您可以将 600px 设置在 768px 之前，或者更改规则以使用 max-width 代替。

Answer 4

我遇到了同样的问题。在我的例子中，使用十进制值就可以了。如果两个断点都匹配但是一个值更具体（有更多的小数位），它将覆盖更简单的一个。

如果一个断点使用 33.3%，那么我需要在另一个断点中使用 25.0%。

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

Why does a media query with a smaller min-width overwrite a larger one?

css

media-queries