THE (NEAR) FUTURE - CSS: Professional Techniques for Modern Layout - page 237

To restrict the column shit ing to screen media only, alter the queries, like so:

@media screen and (min-width: 800px) { ... }
@ media screen and ( min-width: 500 px) and ( max-width: 799 px) {...}
@ media screen and ( max-width: 499 px) {...}

But what if you want the three-column layout used in some non-screen media, like print and
TV displays? h en add in those media using commas, like so:

@media print, tv, screen and (min-width: 800px) { ... }
@ media screen and ( min-width: 500 px) and ( max-width: 799 px) {...}
@ media screen and ( max-width: 499 px) {...}

h e commas here act as logical ORs, so the i rst query reads “use these styles on print media
OR TV media OR a display area on a screen medium where the display area is 800 pixels
or more.”

And if you want the three-column layout used in all non-screen media? Add a statement to
the i rst query using the not modii er saying “anything that isn't screen.”

@media not screen, screen and (min-width: 800px) { ... }
@ media screen and ( min-width: 500 px) and ( max-width: 799 px) {...}
@ media screen and ( max-width: 499 px) {...}

239

As before, the comma joins the two in an OR statement, so it reads as “anything not on a
screen medium OR a display area on a screen medium where the display area is 800 pixels
or more.”

h ere is also an only modii er, so that a query can say something like only print or only
screen and (color) . As of this writing, not and only are the only modii ers in media
queries.

You aren't restricted to pixels for the previous queries, by the way. You can use ems, centim-
eters, or any other valid length unit.

Table 7-1 shows all the query terms that can be used in constructing media queries. Note that
almost all of these terms accept min- and max- prei xes (for example, device-height also
has min-device-height and max-device-height cousins). h e exceptions are
orientation , scan , and grid .

Table 7-1 The base media query terms

Term Description

width

The width of the display area (e.g., a browser window).

height

The height of the display area (e.g., a browser window).

continued