与respond.js类似的作用，都是让不支持CSS3 Media Query的浏览器支持媒体查询，实现自适应，相对于respond.js css3-mediaqueries-js支持几乎所有的media query的语法，访问测试demo
其实现逻辑和respond.js差不多，只是更加支持的media query更加全面，同时支持内联style，支持各种宽度单位(em|ex|px|in|cm|mm|pt|pc),但是这里的初始化是在domready后执行，为了让用户感觉不出页面有闪屏（之前应用初始化样式然后js提取media query中的样式再覆盖一遍）现象，这里的实现是先将html移出可视区域外，等解析完media query后再重置回来，但实际目测感觉稍有闪屏（当然这里的测试是测试body背景色，移出可视区域外不管用，当然绝大部分响应式场景是适用的），实现如下：
// prevent jumping of layout by hiding everything before painting <body> 先将html移出可视区域外
var docEl = document.documentElement;
docEl.style.marginLeft = '-32767px';
// make sure it comes back after a while 异常处理，万一获取mediaquery css失败，重置回来
setTimeout(function () {
docEl.style.marginTop = '';
}, 20000);
……
// return visibility after media queries are tested 生效后重新可见
cssHelper.addListener('cssMediaQueriesTested', function () {
// force repaint in IE by changing width
if (ua.ie) {
docEl.style.width = '1px';
}
setTimeout(function () {
docEl.style.width = ''; // undo width
docEl.style.marginLeft = ''; // undo hide
var now = new Date().getTime();
var useTime = now - initTime;
alert('media query生效时间:'+useTime+'ms');
}, 0);
// remove this listener to prevent following execution
cssHelper.removeListener('cssMediaQueriesTested', arguments.callee);
});其余实现和respond.js基本一致，也需要使用ajax，所以css3-media-queries.js本身不支持跨域，当然非要支持跨域也可以，也可以像respond.js一样使用代理页面跨域即可，但也会出现闪屏的现象。还是先看看不跨域情况下，大多数人为什么选择respond.js，主要原因还是完美支持的media query特性导致压缩后16K，下载和执行时间都逊于respond.js，下面是同域下在ie8的测试结果（耗时140ms而respond.js仅15ms）：
-
优点：1、基本支持所有css3中的media query语法
-
缺点：1、不支持跨域（如cdn），就算支持了跨域也存在闪屏现象；2、和respond.js对比性能较差
注意事项
- 不支持 @import ；
- 对 <link> 和 <style> 标签内的 media 属性无效；
- 以上两条来自官方 readme ；
- 不要用一些奇怪的、明显冲突的 CSS；
- 如果布局乱了，先从自己 CSS 代码的浏览器兼容性找原因；
- 以上两条为博主 debug 的经验。
