Media Queries: Insight of a developer

Been looking into media queries today I've heard the term for awhile but never took the time to look into what media queries actually are and what can be done with them until today after I saw a really good presentation on Adaptive Systems from Simon Collison at Hull Digital Live conference.

Media queries expands on media types which never really took off apart from print media types, Media queries let you create specific styles for specific conditions, for instance you can detect the size of the viewpoint and change the layout accordingly letting you easily modify a layout on a mobile device with little work.

Some good examples of this are: (try resizing the browser)

• Dconstruct
• Colly
• Simple Bits

I have to admit I'm really not surprised media query is not supported in Internet Explorer 8 or older. IE has a history of not supporting techniques that other browsers support such as some css2/3 specs thankfully their are workarounds according to Web Designers Wall:

• CSS Tricks - using jQuery to detect browser size
• The Man in Blue - using Javascript (this article is written 6 years ago)
• jQuery Media Queries Plugin

Media Queries Resources

• http://www.webdesignerwall.com/tutorials/css3-media-queries/
• http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
• http://cssgrid.net/
• http://davidrcole.com/2010/11/make-your-website-mobile-friendly-in-one-night/