Css 媒体查询优先级

我有以下传媒查询:

@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运行它

---

谢谢您的帮助。

是的，规范上就是这么说的

CSS规则始终覆盖以前的规则，

最大高度：768px

将始终匹配低于720的高度

尝试颠倒选择器的顺序。

您必须使用

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

@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（最小高度：769px）和（最小宽度：1px）

如果我的屏幕只有720px，它如何覆盖？同样，720比768小。因此，如果它总是覆盖，我们如何使它在不同的屏幕上工作？最后一个查询总是接管。你能给我指一些关于它如何工作的在线插图吗？我可以给你指一个在线答案（就在这条评论上方几英寸处）。你费心尝试了吗？CSS规则并不总是覆盖以前的规则。CSS遵循一条存在性规则，即属于规则的CSS点数。否决权首先由积分存在决定（其中！important代表非常高的分数），然后由顺序决定。请注意，一定要确定否决票。但我不确定这里是否需要1px的最小宽度。769px是一个很好的技巧（顺便说一句；）如果其他人觉得这很有帮助：w3schools建议我们从移动风格开始，在扩展时使用

minwidth

。