Index by Christopher Schmitt

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

O'Reilly logo

Designing Resolution-Independent Layouts

Problem

You want to build a web page that adapts to the resolution of the browser.

Solution

Use web designer Cameron Adams’s Resolution JavaScript at http://www.themaninblue.com/writing/perspective/2006/01/19/, as shown in Figure 11-31.

Cameron Adams’s page about his script

Figure 11-31. Cameron Adams’s page about his script

The resolution solution relies on two stylesheets: main.css acts as a foundation with basic formatting of the page, and features_1024.css offers styling, as shown in Figure 11-32.

Different looks for the same content based on the size of the browser window

Figure 11-32. Different looks for the same content based on the size of the browser window

Discussion

When the browser is less than 1,024 pixels wide, only the foundation stylesheet is applied. When the browser resolution increases beyond 1,024 pixels, the advanced features are applied.

The Resolution script, although requiring some basic JavaScript knowledge, can be extended to include different stops in resolution support. For example, you can add additional styles at browser widths of 800, 1,024, 1,440, or even 1,660 pixels.

Resolution independence without JavaScript

A part of the CSS3 specification, media queries, adds a feature that allows you to adjust which CSS rules are applied based on the dimensions of the browser’s viewport.

By appending additional conditions in the media attribute ...

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