How to Have Your @Media Queries and Eat IE Too
CSS 3 media queries make building a mobile version of your site incredibly simple — just add a few lines of CSS to handle the smaller screen size of tablets and phones. The only problem is that not every web browser understands @media queries, and in those that don’t your elegant, responsive design is going to fall apart.
There are several ways around this problem. Since the main culprit when it comes to not understanding
@media is Internet Explorer, conditional comments can load an entirely separate stylesheet for older versions of IE. But if you’re starting with a purely vertical layout (for mobile phones) and then applying your floats and positional rules for larger screens — which is the design pattern we recommend — that means you’ll need to handle older versions of other browsers as well.
The main downside to Respond is that, in order to keep it fast and small, developer Scott Jehl chose to only support min-width and max-width media queries and media types. That means if you’re using orientation or other media queries, Respond won’t solve your problems.
For something more robust, you can use the css3-mediaqueries-js library. Css3-mediaqueries-js supports just about every type of media query, but of course it takes a bit longer to render the page and it’s a significantly larger file for browsers to download (15.6 KB minified).