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

Question

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

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

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

谢谢你的帮助.

Answer 1

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

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

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

• 为什么媒体查询的顺序在CSS中很重要？
• CSS媒体查询重叠的规则是什么？
• CSS特异性,媒体查询和最小宽度

但当然只有屏幕尺寸为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; }
}