Combining CSS media queries

Question

I want to display the same set of CSS styles to people printing the page (media=print) and people browsing on a mobile phone. Is there a way I can combine CSS media queries?

Something like

@media only print or @media only screen and (max-device-width: 480px) {
  #container {
    width: 480px;
  }
}

Related: http://stackoverflow.com/questions/7668301/is-it-possible-to-embed-media-queries-within-media-queries — Diodeus - James MacFarlane, Jan 24 '12 at 21:49

score 69 · Accepted Answer · edited Jan 24 '12 at 22:05

69

Separate them with a comma:

@media only print, only screen and (max-device-width: 480px)

See the spec, in particular, example VI (emphasis added):

Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND.

I doubt that the second only is needed, so you can probably do:

@media only print, screen and (max-device-width: 480px)

edited Jan 24 '12 at 22:05

BoltClock

700,868
160
1,392
1,356

answered Jan 24 '12 at 21:50

James Allardice

164,175
21
332
312

1

The "only" operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. So just use comma... eg: if you want to apply a style when the device is in landscape mode: @media (min-width: 700px) and (orientation: landscape) { ... } – Aruna May 11 '14 at 04:28

score 4 · Answer 2 · answered Jan 24 '12 at 21:50

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

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.

You just have to remove the second @media and add some brackets.

Combining CSS media queries

2 Answers2

Linked