1. Code
  2. HTML & CSS

Quick Tip: A Crash-Course in CSS Media Queries

Read Time:1 minLanguages:
This post is part of a series called CSS3 Mastery.
Quick Tip: Mimic Equal Columns with CSS3 Gradients
Quick Tip: The Multi-Column CSS3 Module

In the past, in order to create layouts based upon the width of the user's browser, we had to use JavaScript -- perhaps combined with a server-side language. Fortunately, the process is now becoming far simpler, thanks to CSS media queries.

Method 1: Within your Stylesheet

Method 2: Import from within your Stylesheet

Note that you can also add addition rules, by applying a comma -- much like you would when using multiple selectors.

Method 3: Link to a Stylesheet

Method 4: Targeting the iPhone

An interesting note, after a bit of research around the web, is that, despite the fact that iPhone 4 sports a resolution of 640x960, it still we pick up mobile.css, referenced in the code above. How strange? If you have more information on this, please leave a comment for the rest of us!

Browsers that Support CSS Media Queries

  • Firefox 3.5+
  • Opera 9.5+
  • Safari 3+
  • Chrome
  • Internet Explorer 9+

Please note that Internet Explorer 8 and below do not support CSS media queries. In those cases, you should use a JavaScript fallback.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.