css - 适用于多个属性（AND 运算符）的 CSS 媒体查询的语法是什么？

Question

我想编写一个 CSS 媒体查询，以匹配所有至少 800 像素宽度和 800 像素高度的设备。此媒体查询的目的是针对平板电脑并排除手机。在这种情况下，我不需要担心台式机，因为我只针对移动设备。

我开始：

@media all and (min-device-width: 800px), all and (min-device-height: 800px)

...但我不相信这会起作用，因为如果满足两个条件中的任何一个（逻辑或），这将是正确的。

所以我的下一个猜测是：

@media all and (min-device-width: 800px, min-device-height: 800px)

AND 而不是 OR 的语法是什么？

score 3 · Accepted Answer

从您的声明中删除逗号

@media all and (min-device-width: 800px) and (min-device-height: 800px) {
  //...........
}

阅读此文档以获取更多信息

score 1 · Accepted Answer

试试这个。

您可能不需要检查高度，您是否可以访问任何宽度为 800 像素且高度小于 800 像素的设备？

@media screen and (min-width: 800px) and (min-height:800px)

2 回答 2