Quick Tip: A Crash-Course in CSS Media Queries

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

@media screen and (min-width : 1200px) {
  /* let's do somethin' */

Method 2: Import from within your Stylesheet

@import url( small.css ) screen and ( min-width: 1200px );

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

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="small.css" />

Method 4: Targeting the iPhone

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />

An interesting note, after a bit of research around the web, is that, despite the fact that iPhone 4 sports a resolution of 640×960, 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.