Chapter 6. Using Media Queries

Media queries have a history in CSS2 as a way to specify which styles are applied to different media. Originally, these attributes were setting media="screen" and/or media="print" when defining the styles for your site and printer to render the page.

The curious and beneficial path that today’s media query is heavily involved in is allowing styles to be applied based on the width of the screen viewing the site. This does not mean that width is the only expression you can use; other expressions, such as color depth, pixel density, and even the aspect ratio, can also be used with media queries.

If you have ever dabbled in coding HTML, you have undoubtedly seen a call to a CSS file that has looked similar to the following: ...

Get Responsive Mobile Design: Designing for Every Device now with the O’Reilly learning platform.

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