Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

Flexible Web Layouts with CSS3 Media Queries

  • Print
  • + Share This
  • 💬 Discuss
Can your website handle the various screen sizes and other features of modern electronics? Chris Mills, one of the authors of InterACT with Web Standards: A Holistic Approach to Web Design, shows how to use CSS3 media queries to combine multiple CSS formatting options into a single stylesheet, optimizing your site to adapt dynamically to match any device.

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.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus