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

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

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

将head中所有外部引入的css文件路径取出来存储在一个数组中，遍历数组，并一个个发送AJAX请求，AJAX回调后，分析response中的media query的min-width和max-width语法，它仅仅支持min-width和max-width，分析出viewport变化区间对应相应的css块，页面初始化的时候和window.resize时，根据当前viewport使用相应的css块。

在官方文档中也有一些小提示：

• 越早引入的respond.js，也就越可能避免ie下出现的闪屏；
• 不支持嵌套的媒体查询；
• utf-8格式的css文件对respond.js文件的运行有影响；
• 跨域会出现闪屏；

由此，可以根据这个情况实现基本思路，需要注意到的地方：

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

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

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

4、另外，虽然把respond放置在head里还是在body后面都能够实现，但是建议放置在head中；

5、最好不要为CSS设置utf-8的编码；

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