CSS media queries: max-width OR max-height

css media-queries
Fraser picture Fraser · Jul 10, 2012 · Viewed 472.5k times · Source

When writing a CSS media query, is there any way you can specify multiple conditions with "OR" logic?

I'm attempting to do something like this:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

Answer

Fabrizio Calderan picture Fabrizio Calderan · Jul 10, 2012

Use a comma to specify two (or more) different rules:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

From https://developer.mozilla.org/en/CSS/Media_queries/

...In addition, you can combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the associated style sheet is applied. This is the equivalent of a logical "or" operation.

Related questions

@Media min-width & max-width

I have this @media setup: HTML: <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS: @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @…

Read More
Media Queries: How to target desktop, tablet, and mobile?

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. I want to be able to target desktop, tablet and mobile. I know that there will be some …

Read More
Twitter Bootstrap 3: how to use media queries?

I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size. How can I use media queries to make this kind of logic?

Read More