Question

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

我知道600px后来出现在CSS文件中，这可能是一个原因，但是当屏幕尺寸为600或768时，肯定只能应用一个吗？

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

enter image description here

感谢您的帮助。

Answer 1

我知道600px后来出现在CSS文件中，这可能是一个原因

这通常是除了无关的创作错误或更糟糕的browser bugs之外的原因。任何大于或等于768px的东西，必要时也大于或等于600px，所以它们都必须匹配。

有关详细信息，请参阅以下相关问题：

但当然只有在屏幕尺寸为600或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时，两者都将被加载，但只有一个将被应用。媒体查询的顺序是关键。 之后的那个将覆盖之前的规则。

如果你想让它变得更加混乱。只需将限制/范围设为：

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

Answer 3

600px规则适用于600px或更大的任何内容。如果您不希望600px覆盖768px，您可以将600px放在768px之前，或者将规则更改为使用max-width工作。

Answer 4

我有同样的问题。在我的情况下使用十进制值做了伎俩。如果匹配两个断点但是一个值更具体（具有更多的小数位），则会覆盖更简单的断点。

Styles preview

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

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

4 个答案: