css3 mediaqueries.js让IE系列支持CSS3 Media Query

文章目录

与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):

 T1xMo1Xk0bXXXloQTy-500-383 T1hT71XedaXXa5OP2y-500-276

css3-mediaqueries-js总结

  • 优点:1、基本支持所有css3中的media query语法
  • 缺点:1、不支持跨域(如cdn),就算支持了跨域也存在闪屏现象;2、和respond.js对比性能较差

注意事项

  1. 不支持 @import ;
  2. 对 <link> 和 <style> 标签内的 media 属性无效;
  3. 以上两条来自官方 readme ;
  4. 不要用一些奇怪的、明显冲突的 CSS
  5. 如果布局乱了,先从自己 CSS 代码的浏览器兼容性找原因;
  6. 以上两条为博主 debug 的经验。
原文链接:css3 mediaqueries.js让IE系列支持CSS3 Media Query 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/css3-mediaqueries-js.html)

发表评论

请登录后发表评论: