媒体查询优先级

Question

>我有以下媒体查询：

@media all and (max-height: 720px) and (min-width:1px) {
    .tabeditor {
        height: 60%;
    }
}
@media all and (max-height: 768px) and (min-width:1px) {
    .tabeditor {
        height: 63%;
    }
}

当我在 1280X720 上运行它时，我看到 768px 查询的高度接管。这是对的吗？我正在Chrome中运行它。

感谢您的帮助。

Answer 1

@media all and (max-height: 720px) and (min-width:1px) 
{
    .tabeditor {
        height: 60%;
    }
}
@media all and (max-height: 768px) and (min-height : 721px) and (min-width:1px) 
{
    .tabeditor {
        height: 63%;
    }
}

您可能还需要一个@media all and (min-height: 769px) and (min-width:1px)

Answer 2

是的，这就是规范所说的。

CSS 规则始终

覆盖以前的规则，并且max-height: 768px将始终匹配低于 720 的高度。

尝试反转选择器的顺序。

Answer 3

你必须使用

@media all and (min-height: 720px) and (min-width:1px) 
{
.tabeditor {
    height: 60%;
}
}
@media all and (min-height: 768px) and (min-width:1px) 
{
.tabeditor {
    height: 63%;
}
}

因此，当您在 720px 高度时，768px 媒体查询将不会生效