Learning Responsive Web Design

Chapter 5. Media Queries

Media queries are what make responsive websites responsive to the devices the sites are being viewed on. Up until now, all of our CSS declarations have applied to the web page without regard for screen size.

CSS media queries allow you to apply different style declarations based on qualities of the device the website is being viewed on, most commonly the width of the viewport: arrange the site in two columns, but if the screen is wider than 40 ems, arrange it in three columns instead.

This is the part of responsive design that means you can see a different layout on a mobile phone than you see on a tablet or on a desktop monitor. Media queries are sometimes referred to as the special sauce or the magic pixie dust of responsive design, because they go on top of all the other pieces of your design and make magic happen.

In this chapter, you’ll learn how to structure a media query, and where to add it to your styles. You’ll learn what media queries can be used for—not just the obvious viewport width—and how media queries are supported by browsers.

You’ll learn how to starting thinking about the design of your site, starting with the smallest screen widths and working upward with progressive enhancement. You’ll learn what a breakpoint and a design range are, and how to use them in your designs.

Finally, we’ll go back to our example site and add some media queries to create a two-column version of the design for wider screens, and make other layout changes that depend ...