多媒体查询不起作用。我不明白

Question

很简单，只要我一直在使用媒体查询，我有一个问题，当试图将它们组合起来时（下图）

@media screen and (max-width: 600px) and (max-height:400px) {
    /* code here */
}

它从不工作，我总是必须像他们一样分开它们

@media screen and (max-width: 600px) {
    /* code here */
}

然后

@media screen and (max-height: 600px) {
    /* code here */
}

作为一个例子，这里有一些代码来显示我的意思。

第一个链接是媒体查询的组合。（不起作用）

http://somdow.com/4testing/b/

并且第二个链接与它们分开。（工作）

http://somdow.com/4testing/b/index2.html

并不是一个大问题，但过了一段时间，它确实使代码膨胀，加上它应该有效，这让我感到难过。

为什么有任何想法？ 谢谢你提前。

Answer 1

@media screen and (max-width: 600px) and (max-height:400px) {
  /* code 1 */
}

效果很好，但只有在宽度小于600px且高度小于400px（两个条件必须匹配）时才会发生：

• 800x300：不适用
• 500x500：不适用
• 400x300：申请

你想要的是OR条件（不是AND），你可以这样做：

@media screen and (max-width: 600px), screen and (max-height: 400px) {
    /* code 1 */
}

• 800x300：申请
• 500x500：apply
• 400x300：申请