April 10, 2012

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

Question by mattwindwer

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 by Starx

Remove the commas from your declaration

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

Read this doc for more info

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!