Understanding and Implementing Media Queries

As you learned in the section “Using Media-Specific Style Sheets” in Chapter 8, you can target your CSS to specific media types in two ways. (There is a third way, the @import rule, that we didn’t cover, because it affects performance.) To recap, the first way is via the media attribute of the link element; for example, <link rel="stylesheet" href="global.css" media="screen" />, which goes in your page’s head. The second way is with an @media rule in your style sheet:

/* Print style sheet */@media print {    header[role="banner"] nav,    .ad {        display: none;    }}

Media queries enhance the media type methods, allowing you to target your styles to specific device features . They’re particularly ...

Get HTML5 and CSS3: Visual QuickStart Guide, Seventh Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.