HTML and CSS Reference
In-Depth Information
if you test the page now in a variety of devices and screen widths, you should see the original two-column
display on screens that are at least 600px wide. On smaller screens, you'll see the single-column layout. iE 8
and earlier access the original styles through a conditional comment, so they always display the two-column
layout even when the browser is resized to less than 600px .
Many improvements could be made to this responsive layout. For a start, the sidebar should be moved after
the main content in the underlying HTMl. This is the type of design decision that's much easier to make at
the outset, and it highlights the importance of designing for mobile first. The navigation menu also takes up
a lot of valuable space on small displays. it could be improved by expanding and contracting it dynamically
using JavaScript. in spite of the design's shortcomings, it should give you an insight into serving different
styles depending on screen width using media queries.
Media queries are an indispensable tool for serving different styles to devices depending on features such as
screen width, orientation, and pixel density. They're supported by all modern browsers and high-end mobile
devices, but not in IE 8 or earlier. It's considered best practice to serve basic styles to all browsers, and to use
media queries to fine tune the experience in browsers that support them.
Smartphones usually scale web pages to fit a nominal viewport that's much wider than the screen's physical
size. To make sure your styles are interpreted correctly, add the viewport <meta> tag in the <head> of every page,
and set the value of width to device-width . Eventually, the <meta> tag will be replaced by the @viewport rule in
the style sheet, but support is currently experimental. A complicating factor is the fact that iOS devices always
consider width to be the shorter of the two screen dimensions, even when the device is in landscape orientation.
Other mobile operating systems regard width as the horizontal dimension based on how the device is currently
being held.
To avoid background images blurring on high-resolution displays, you can use larger images and scale them
to the standard size with the background-size property. Detect the pixel density by creating a media query for
resolution using the standard dppx (dots per pixel) unit. For backward compatibility, it's also a good idea to use
the nonstandard -webkit-device-pixel-ratio property.
The next chapter explores CSS3 multicolumn layout, which automatically flows text from one column to the
next in a similar way to a newspaper.
Search WWH ::

Custom Search