To accomplish this integration:
- Download and enable the Libraries module: http://www.drupal.org/project/libraries
- Download the css3-mediaqueries-js library: http://code.google.com/p/css3-mediaqueries-js/
- Save css3-mediaqueries.js into sites/all/libraries/css3-mediaqueries/css3-mediaqueries.js
- Enable the "Responsive layouts for IE 6-8" module, which is bundled with Fusion Accelerator.
- 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)