How to get IE6-8 to understand CSS media queries

Option 1 – Apply “mobile first” methodology

A “mobile first” approach which treats IE6-IE8 the same as mobile devices (source: Craig Buckler) is probably the best approach if you have the luxury of having enough time to write your CSS from scratch. However, this may not always be possible.

Option 2 – Use a JavaScript library

There are some JavaScript libraries you can use to add support for media queries to IE6-IE8.

What are the pros and cons of Respond.js and css3-mediaqueries.js? css3-mediaqueries.js provides more comprehensive, robust support for media queries; but the downside is that it’s (reputedly) slower than Respond.js. Respond.js is focused solely on providing support for min-width and max-width features, and ignores another aspects of the CSS3 media queries standard. But in my book, this isn’t really a disadvantage, because min-width and max-width are the only features I am using in my responsive design process today.