1. Web Design
  3. CSS

Quick Tip: A Crash-Course in CSS Media Queries

Scroll to top
Read Time: 1 min
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

@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 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.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.