Making media queries work in IE8 and below

When using @media CSS queries, Internet Explorer 8 and below will fail to respect them.

Though there are several options (like mediatizr and css3-mediaqueries), Respond.js Archive was the only one that worked for me.

If you do not want to pollute your application's default JS file with Respond.js, simply:

1. Create an extra JS file (like media_queries_polyfill.js) that loads Respond.js:

   Copy
   //= require respond-1.4.2
   

2. Make sure it's added to config.assets.precompile

3. Embed that JS file in your layout only for old IEs. Looks like this in Haml:

   Copy
   /[if lt IE 9]
     = javascript_include_tag 'media_queries_polyfill'
   

Note: Using an IE conditional means other super-ancient browsers that do not support media queries (like Safari 2.x, or Firefox 3.0 and below) will still not respect them. You are probably fine with that.