CSS媒体查询OR运算符（，）未按预期工作

Question

我有一个网站的媒体查询，取决于查看窗口的宽度：

@media (max-width: 600px) {
...
}

这完美无缺。

我发现某些设备上的网站菜单被切断存在问题，因为在上面的语句中没有考虑查看窗口的高度，所以我相应地调整了语句（菜单是通常垂直，但屏幕较小或高度较小，菜单应更改为水平）：

@media (max-width: 600px),  (max-height: 400px){
...
}

但是这不起作用，max-width值可以工作但如果我将窗口（Firefox和Chrome）调整为信箱大小（<400px），那么它不会运行相应的height媒体查询中包含的规则。

我还玩过各种变体，例如：

@media all and (max-width: 600px), all and (max-height: 400px){
...
}

但没有成功。

我已经阅读了有关CSS高度的各种文章，但我不明白为什么我的上述规则不适用？任何答案？

Answer 1

尝试

@media (max-width: 600px) and (max-height: 400px) {
    body {
        background:#000;
    }
}

并且工作得很好！

更新：OR也工作http://jsfiddle.net/noj3u3xn/

@media (max-width: 600px), (max-height: 300px) {
    body {
        background:#000;
    }
}

也许你可以分享更多你的CSS？

Answer 2

将相反的查询应用于所有其他媒体查询案例时，问题似乎已得到解决：

例如所有其他媒体查询需要在每个案例中附加and (min-height: 401px)，因此它们不会覆盖上述案例。

欢呼声