适用于多个属性（AND运算符）的CSS媒体查询的语法是什么？ [英] What is the syntax for a CSS media query that applies to more than one property (AND operator)?

问题描述

我想编写一个CSS媒体查询，该查询匹配宽度至少为800px，高度为800px的所有设备。此媒体查询的目的是定位平板电脑和排除手机。在这种情况下，我不需要担心桌面，因为我只指定移动设备。

I would like to write a CSS media query that matches all devices with at least a 800px width and 800px height. The purpose of this media query is to target tablets and exclude phones. I do not need to worry about desktops in this case, since I am only targeting mobile devices.

我开始：

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

...但我不相信这将工作，因为如果满足两个条件之一（逻辑OR）将是真的。

...but I don't believe that will work because it will be true if either of the two conditions are met (logical OR).

所以我的下一个猜测是：

So my next guess would be:

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

AND而不是OR？

推荐答案

从声明中删除逗号

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

阅读此 doc 了解详情

这篇关于适用于多个属性（AND运算符）的CSS媒体查询的语法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！