You want to build a web page that adapts to the resolution of the browser.
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.
Figure 11-32. Different looks for the same content based on the size of the browser window
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.
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 ...