CSS3 media queries for ultimate style sheet flexibility
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:
- Russ Weakley’s presentation is a step-by-step guide; it’s definitely worth spending some time going through each slide because it will give you the basics for implementing media queries on your own site
- Responsive Web Design by Ethan Marcotte is a great description of media queries; the final example provides an alternative layout for smaller devices. Resize your browser window smaller to see the different layout.
- You can even tailor your style sheet to iPad landscape or portrait orientations. Now, that’s cool!
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!
Related Posts
Comments
Next · Previous
We Like It
Join SugarSync for online backup. Sync your files between Mac, PC and mobile phone. Get 2 GB FREE and up to 10 GB bonus space!
Featured Book
Flexible Web Design by Zoe Mickley Gillenwater describes how to build fluid and elastic CSS layouts. It's a great read!
Buy from Amazon.com · Amazon.co.uk
Steve Maggs 3 June 2010, 09:10 1
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.