CSS3 Foundations

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.

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