ie浏览器不兼容css媒体查询的解决办法

【前言】

       之前讲解响应式布局时，只是举了几个简单例子。后直接开始BootStrap框架讲解，由于时间问题，对于兼容未做介绍。最近又有同学测试后发现IE不支持媒体查询@media，对此在这里做下记录，总结下ie浏览器不兼容css媒体查询的解决办法。

 

【问题】

      考虑到在不同分辨率下，网站页面依然能显示一致，除了通过js来控制，css媒体查询更为方便，而痛点在于ie8不支持。

 

【思考】

       首先我们来测试下BootStrap在IE下的情况，测试后发现可以正常支持响应布局。那么为什么BootStrap可以呢？经常使用BootStrap的可以发现，Bootstrap里面引入了这个Respond.js文件，从名字看出来是自适应的兼容。也正是这个脚本，使得IE6-8支持CSS3 Media Query

       respond.js的CDN可以去网上找，这里我写了出来，打开复制即可：

    1.4.2版：

 

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    引入后，打开IE看下，会发现自适应的效果挺好的。因此Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

 

 

【解决方案】

      我们可以通过respond.js库来解决，这个插件的原理很简单

 

【插件原理】

       需要理解respond.js的实现思路：

       第一步，将head中所有外部引入的CSS文件路径取出来存储到一个数组当中；

       第二步，遍历数组，并一个个发送AJAX请求；

       第三步，AJAX回调后，分析response中的media query的min-width和max-width语法（注意，仅仅支持min-width和max-width），分析出viewport变化区间对应相应的css块；

       第四步，页面初始化时和window.resize时，根据当前viewport使用相应的css块

 

【核心理论】

         由此，就可以根据基本的实现思路，得到一些书写代码时要注意的地方：

   1、需要启动本地服务器（localhost），不能使用普通本地的url地址（file://开头）；

   2、需要外部引入CSS文件，将CSS样式书写在style中是无效的；

   3、由于respond插件是查找CSS文件，再进行处理，所以respond文件一定要放置在CSS文件的后面

   4、另外，虽然把respond放置在head里还是在body后面都能够实现，但是建议放置在head中（具体原因在下面文档提示提到）

   5、最好不要为CSS设置utf-8的编码，使用默认（原因详见下面文档提示部分）

 

【文档提示】

      在官方文档当中的一些提示：

   1、越早的引入respond.js文件，也就越可能避免IE下出现的闪屏。

   2、不支持嵌套的媒体查询

   3、utf-8的字符编码对respond.js文件的运行有影响

         官方API原文：if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.

         基本含义就是：utf-8格式的CSS文件字符编码会对插件造成影响。

        但是在我使用IE6-8进行测试的时候，都能够正常显示（无论是在css文件中增加charset设置还是在link标签中增加charset设置）。因此，并不是太清楚这个位置bug的含义。

   4、跨域可能会出现闪屏（还没有测试，具体情况不详）

 

【其他插件】

   其他的支持响应式布局的插件-css3-mediaqueries-js

   css3-mediaqueries-js官方文档和demo都没有，相对于respond.js css3-mediaqueries-js支持几乎所有的media query的语法。会出现闪屏。并不是很推荐使用，虽然能够支持全部的mediaqueries，但min-width和max-width其实就可以满足我们对响应式布局的需要。

 

【注意】

   最近做项目时发现了一个bug：由于动画@keyframe中的@符号，对respond.js造成影响

 

 

.