Question

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?

Answer 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