CSS 媒体查询或运算符 (,) 未按预期工作

Question

我有一个网站的媒体查询，它取决于查看的宽度 window:

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

这非常有效。

我发现站点菜单在某些设备上被截断是有问题的，因为在上面的声明中没有考虑到观看高度window，所以我相应地调整了声明(菜单通常是垂直的，但是小屏幕或高度小的菜单应该改为水平的) :

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

但是这不起作用，最大宽度值有效，但如果我将 window（Firefox 和 Chrome）的大小调整为信箱大小（<400px），则它不起作用't 运行媒体查询中包含的相应 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;
    }
}

并且工作得很好！

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

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

Answer 2

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

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

干杯

CSS media query OR operator (,) not working as expected