媒体查询优先级

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

Answer 3

@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)

媒体查询优先级

Media query precedence

css

media-queries