CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

Sample Sites

You need to view the following sites with a browser that supports media queries such as Firefox, Chrome, and Safari. Go to each site and see how the layout responds base on the size of your browser winow.

This one is very similar to previous example Colly, but the difference is the images of TeeGallery resize as the layout stretchs. The trick here is use relative percentage value instead of fixed pixel (ie. width=100%).

Conclusion

Keep in mind: having an optimized stylesheet for mobile devices doesn’t mean your site is optimized for mobile. To be truly optimized for mobile devices, your images and markups need to cut on the load size as well. Media queries are meant for design presentation, not optimization.

Nice tutorial but why I see the 4th box which should only appear on IPhones? Either Firefox or Chrome could interpret the device-width command… Or did I use it the wrong way??? Only max and min-width works for me, could you help me why?

That’s useful, too bad CSS3 is only on modern browsers, I have tested many CSS3 codes on older browsers and the page gets converted into a mess, I guess we would have to wait until most people upgrade their browsers.