css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题

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、跨域可能会出现闪屏（还没有测试，具体情况不详）