It’s not that important to teach older versions of IE how to handle media queries. The point is to make layouts work on small screens. I don’t know of any cell phones running IE6. As an alternative to using polyfills, I tend handle legacy IE with conditional comments. The only trade off for this is, IE < 9 users can’t change the layout by fiddling with the window size. I can live with that. Here is how I use Sass to eliminate the redundancies associated with this kind of browser sniffing.
Wrap all of the styles that would be declared within the laptop sized media query in a mixin. Then, call that mixin from inside a media query. No magic so far, just using a mixin in lieu of copy and paste.
_laptop.scss
@mixin laptop {
[all of your laptop size styles go here]
}
@media only screen and (min-width: 992px) {
@include laptop;
}
Next, I call the same mixin from within an partial made just for old versions of IE. Finally, I link to that stylesheet from within an IE conditional comment.
_ieLT9.scss
@include laptop;
// That is likely to be the entire contents.
IE conditional comment
<!--[if lt IE 9 ]>
<link rel="stylesheet" href="/path-to/css/ieLT9.css" media="screen, projection">
<![endif]-->
That’s it. Now you don’t have to worry about keeping your layout changes in sync across nearly identical sheets. Old browsers get a sensible layout. Best of all, we didn’t have to use any javascript.