HTML and CSS Reference
In-Depth Information
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.
for you to query attributes of a device on which a page is being viewed and to set up styles specific to those condi-
tions.
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 instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
Using Opera Mobile Emulator
Before you begin adding media queries to the Cool Shoes & Socks stylesheet, first take a look at the page in Opera
Mobile Emulator.
2.
After it is installed, open Opera Mobile Emulator.
