结合两个媒体查询

Question

我正在尝试测试媒体查询。当宽度小于

我尝试过使用：

1. @media only screen and (max-width: 600px) and (max-height: 400px),
2. @media only screen and (max-width: 600px) and only screen (max-height: 400px),
3. @media only screen and (max-width: 600px and max-height: 400px),
4. @media only screen and (max-width: 600px), (max-height: 400px)

但是 1-3 没有做任何事情，如果任一陈述为真，则 4 将背景渲染为蓝色。每当我用谷歌搜索我想做的事情时，我都会看到像#4 这样的解决方案的答案。 （例如this SO answer.）这不是我想要的。

我通过使用下面的嵌套查询使其工作。 这是做我想做的最好/唯一的方法还是有更清洁的解决方案？

@media only screen and (max-width: 600px) {
    @media only screen and (max-height: 400px) {
        body {
            background-color: blue;
        }
    }
}

Answer 1

最干净的方法是您提出的第一个解决方案¹，它实际上工作正常 - 请参阅下面的 sn-p（展开为全尺寸）：

div {
  background-color: blue;
  height: 300px;
}

@media only screen and (max-width: 600px) and (max-height: 400px) {

  div {
    background-color: red;
  }


}

<div></div>

¹@media only screen and (max-width: 600px) and (max-height: 400px)