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?

Answer 1

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)