What is the syntax for a CSS media query that applies to more than one property (AND operator)?

问题

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.

I started with:

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

...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)

What is the syntax for an AND and not an OR?

回答1:

Remove the commas from your declaration

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

Read this doc for more info

回答2:

try this.

You may not need to check for the height though, do you have access to any devices that are 800px wide with a height of less than 800px?

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

来源：https://stackoverflow.com/questions/10085585/what-is-the-syntax-for-a-css-media-query-that-applies-to-more-than-one-property