7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & 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


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.

Advertisement
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 Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.