O'Reilly logo

HTML5 and CSS3: Visual QuickStart Guide, Seventh Edition by Bruce Hyslop, Elizabeth Castro

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

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 ...

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