Last updated 3 April 2012. Created on 3 April 2012.
Edited by shamio, esmerel. Log in to edit this page.

Responsive layouts rely on CSS3 media queries, which are not supported prior to IE 9. Fortunately, the JavaScript library css3-mediaqueries can be used to simulate that behavior, and Fusion provides easy integration.

To accomplish this integration:

  1. Download and enable the Libraries module:
  2. Download the css3-mediaqueries-js library:
  3. Save css3-mediaqueries.js into sites/all/libraries/css3-mediaqueries/css3-mediaqueries.js
  4. Enable the "Responsive layouts for IE 6-8" module, which is bundled with Fusion Accelerator.
  5. In your theme settings, make sure the "Support IE 6-8" option has been checked. (It's checked by default.)

When IE 6-8 is detected, the library will be loaded automatically.

In order for the library to work, CSS aggregation must be enabled. (This is also the case with respond.js) To turn on aggregation, go to admin/config/development/performance and click the "Aggregate and compress CSS files" checkbox.

If you can't use these libraries:

A non-preferred alternative is to use the respondjs module. This is a smaller library, which is potentially a concern for very high performance sites, but it does not support as many features as css3-mediaqueries.js.

To use, install respondjs and use these media queries in your theme settings. They are not as robust as the default but are compatible with respond.js:

  • desktop: only screen and (min-width:1200px)
  • tablet - landscape: only screen and (min-width:960px) and (max-width:1199px)
  • tablet - portrait: only screen and (min-width:768px) and (max-width:959px)
  • mobile: only screen and (max-width:759px)

Looking for support? Visit the forums, or join #drupal-support in IRC.


VasyOK’s picture

"Download the css3-mediaqueries-js library:"
There is no files to download!

MajikSunshine’s picture

Download from GitHub