O'Reilly logo

Responsive Mobile Design: Designing for Every Device by Phil Dutson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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. That is not to say that width is the only expression that can be used as other expressions such as color depth, pixel density, and even the aspect ratio can 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 something similar ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required