Flexible Web Layouts with CSS3 Media Queries
This article introduces you to media queries, a CSS3 module that already works with most modern desktop browsers (including support announced for Internet Explorer 9), as well as many browsers for alternative browsing devices, such as Opera Mobile and Opera Mini and Mobile Safari. With media queries, you can apply rules dynamically based on screen width/height, resolution, aspect ratio, and other browser/device properties.
I'll give you a rundown of basic media query syntax and usage, and then we'll look at some dynamic examples.
Common Uses for Media Queries
Media queries let you override various styles set earlier in the source order, so that you can optimize the page's layout, look and feel, etc., appropriately for different device properties. One obvious use is to make dynamic layout changes depending on screen size. For example, you might remove some floats, in order to reduce the number of columns from three to one when the viewing device is a small screen device such as a mobile phone.
Another common use is removing certain page features (such as the navigation menu or the header and footer) when the page is printed. By using media queries, you avoid having to use a separate print stylesheet for each type of device.