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

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

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

尝试颠倒选择器的顺序。

Answer 2

@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 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媒体查询将不会生效

媒体查询优先级

3 个答案: