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
In this Think Vitamin video, you'll get an introduction to wireframing. You'll learn about some of the differences between low fidelity wireframes and high fidelity mockups » UX Wireframing Introduction
We Like
ThemeForest sell a range of site templates from some fantastic designers. They also sell some great WordPress themes!
Online invoicing made easy with CurdBee!
» Sign up
Join SugarSync for online backup. Sync your files between Mac, PC and mobile phone. Get 5 GB FREE and up to 10 GB bonus space!
Featured Book
HTML5 and CSS3 for the Real World will show you how to create websites using these new methods.
This easy-to-follow guide covers everything you need to know to get started. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds. Buy the Book! · FREE Chapters
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.
Sam Desborough 16 September 2010, 09:15 2
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.