考虑到在不同分辨率下，网站页面依然能显示一致，除了通过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造成影响。
ie浏览器不兼容css媒体查询的解决办法
原文地址：http://www.cnblogs.com/gufeibai/p/7568665.html