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、越早的引入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造成影响
.