Building a Page that Adapts with Media Queries

The previous section explained how media queries work. Now you’ll see how to apply them to a full page so that its layout adapts to a device’s viewport size. This is the same technique used in Ethan Marcotte’s responsive Web design approach. However, I do not adapt the image sizes, as responsive designs typically do (it isn’t mandatory). I’ll use our page from Chapter 11 as the example.

I’m not going to show you all the style rules I apply within each media query block, because those will be different from one site to another. The important thing is to know how to approach building a responsive site, and the types of media queries used to achieve that. You can view the completed page and its code ...

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.