You are previewing CSS3 Foundations.

CSS3 Foundations

Cover of CSS3 Foundations by Ian Lunn Published by John Wiley & Sons
O'Reilly logo

chapter sixteen

Making Your Website Look Great Across Multiple Devices

With so many different types of devices able to access the web today, how a web page is displayed on those devices needs to change to best suit the device it is being viewed on. At the moment, the Cool Shoes & Socks page is suited for desktop browsers, but cramming all of that page into the small screen of a mobile device, for example, makes the content very small and difficult to read.

As you saw in Chapter 2, CSS2 offers media types (www.w3.org/TR/CSS2/media.html), which allow you to apply styles to specific conditions such as screen, print, and handheld. Of course, these media types were rather short-sighted. What is handheld? A mobile phone? A tablet device, such as an iPad? A Nintendo DS? All these devices could be considered as “handheld,” but they still differ greatly—in size, in features, and the environment in which they are used.

css3_badge.psd  The CSS3 media queries module (www.w3.org/TR/css3-mediaqueries/) adds many new ways for you to query attributes of a device on which a page is being viewed and to set up styles specific to those conditions.

In this chapter, you use the free Opera Mobile Emulator (www.opera.com/developer/tools/mobile/) to build and test a Cool Shoes & Socks page that is capable of adapting to varying device conditions.

Project files update (ch16-00): If you haven’t followed the previous ...

The best content for your career. Discover unlimited learning on demand for around $1/day.