Quick Tip: A Crash-Course in CSS Media Queries

Posted on September 16th, 2010. Written by Blancer.


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.



Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?


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.

This entry was posted on Thursday, September 16th, 2010 at 3:02 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Both comments and pings are currently closed.

Blancer

Similar Projects

    None Found