Bluehost: Web hosting from $3.95/month. Sign Up

CSS3 media queries for ultimate style sheet flexibility

Posted on by Clive Walker in CSS3

With the plethora of devices (iPad, iPhone, netbooks) that are being used for browsing websites these days, it makes sense to adapt your style sheet so that each user device gets the best experience possible. Yet, how do you make a website display well on a wide screen monitor but still be perfectly usable on, for example, an iPhone with a horizontal resolution of 480 pixels?

CSS3 media queries are one of the best ways of solving this dilemma because they enable you to specify style sheets based on properties such as device width. Here are a few articles about media queries that I have been reading recently:

Browser support. Yes, well you know what I’m gonna say here don’t you?! Media queries are supported by most modern browsers (Firefox 3.6, Chrome, Safari, Opera) but not Internet Explorer 8. Still, IE9 looks like it will support CSS3 media queries judging by this article about IE9 preview on the IE blog and this demo site. Hurrah!

Comments

  • 03 Jun 2010 09:10:15

    This is a really well timed post, and something that will doubtless come in really useful for any sites developed from now on. With the rise of the iPhone and iPad we can’t ignore other media types/sizes any longer (if like me, you have been up until now!).

    Thanks for the links, I’ll be looking at them all in the next few days.

  • 16 Sep 2010 09:15:18

    Really like this post and the link to the slide show. Our team was thinking about doing a presentation on the value of CSS3, so some great tips and information about how it is constantly growing in popularity.

Leave a comment

A simple question that helps prevent automated form fillers.

© 2016 Clive Walker