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.
If the extra http requests of additional stylesheets (to say nothing of maintaining those stylesheets) isn't appealing, there are a couple of very nice polyfill solutions that use JavaScript to apply @media rules to browsers that don't understand them.
Respond is a very lightweight (~1KB) JavaScript library that will detect CSS 3 media query support and apply the rules to browsers that don't natively understand them. All you need to do is end every min/max-width media query block with a comment: /*/mediaquery*/.
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).
Don't want to rely on JavaScript at all? Well, then you're stuck with multiple stylesheets. Developer Jeremy Keith has a nice overview of how he handles media queries on Huffduffer without the need for JavaScript.
See Also:
