Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 320

This technique is advantageous not only for mobile support, but also contributes to (although won't guarantee)
user experience, accessibility, and usability. While responsive web sites are not necessarily accessible, and not all
accessible web sites are responsive, the proper use of standards results in web sites that are accessible and responsive
at the same time.
Another approach, elastic layout applies fully scalable elements expressed in em rather than % in the style sheets.
Because 1em is the currently specified font size, web page components of elastic layouts can adopt proportionally to
the font size the reader uses.
Set the Viewport
Using the initial scale on mobile browsers can lead to unpredictable layout. To ensure that the device screen width is
used as the viewport width, the meta tag can be used in the document head (Listing 9-3).
Listing 9-3. Set the Device Screen Width As the Viewport Width
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Create Markup For Responsive Layouts
The first liquid layout designs were based on fixed pixel widths and arbitrary percentage values. If you go one step
further and calculate the appropriate proportions precisely, all elements of the resulting layout will resize their widths
proportionally in relation to one another, regardless of the browsing device.
The proportions for each element can be calculated by dividing the target element by its context. A common
technique is to draw an accurate web comp or mockup in Photoshop or Illustrator, calculate or measure the page
element, and divide it by the full width of the page.
For example, if the layout is 960 pixels wide (“container”), and we have a 300 pixel wide sidebar, the width CSS
property of the target element should have a value of 31.25% (300/960=0.3125) rather than 300px . The sidebar in this
example will always be 31.25% of the width of the main container, regardless of the current width of the container (the
items of the web site remain proportional to each other even if the entire page is rescaled).
Fluid grids are important in Responsive Web Design, but if the width of the browser becomes too narrow, the
layout can start to collapse (a three-column layout, for example, wouldn't work very well on a small mobile phone).
To address this issue, conditional CSS styling can be applied using CSS3 Media Queries.
Conditional Styling with CSS3 Media Queries
With CSS3 Media Queries, web sites can automatically detect features and feature support, and maximize user
experience by applying different CSS rulesets based on the detected values. A frequently used CSS3 media query
checks the minimum width ( min-width ), making it possible to apply specific CSS styles if the browser window reaches
a particular width (Listing 9-4).
Listing 9-4. CSS Rules For Mobile Devices Using a Media Query
@media screen and (min-width: 480px) {
.content {
float: left;
}
/* ... */
}