Respond.js让IE6~8支持CSS3媒体查询响应式布局

Question

响应式设计似乎是现在网站的标配，根据不用的尺寸的显示屏，自动调整网页元素的大小和布局，IE浏览器直到IE9才支持响应式中的媒体查询，但是现在任然有很多用户使用的IE9以下的浏览器，使我们不得不进行IE低端浏览器的考虑。

Respond.js 就是让不支持 CSS3 Media Query 的浏览器包括IE6-IE8等其他浏览器支持媒体查询，支持我们现在的响应式设计布局。

使用方法

Respond.js 不需要被调用和初始化，只需要引入页面即可，但是引入的位置有点讲究：

1、要想实现响应式布局，首先需要书写基本的响应式布局的样式。

@media screen and (min-width: 480px){
    ...styles for 480px and up go here
}

2、在 CSS 的后面引入 respond.min.js 文件，官方说的是越早引入越好，在IE下面看到页面闪屏的概率就越低，因为最初 CSS 会先渲染出来，如果 respond.js 加载得很后面，这时重新根据 Media Query 解析出来的 CSS 会再改变一次页面的布局等，所以看起来有闪屏的现象。

插件实现原理

下面是插件的工作原理，了解了工作原理能够让我们更好的使用这个插件：

1. 将 head 中所有外部引入的CSS文件路径取出来存储到一个数组当中
2. 遍历数组，并一个个发送AJAX请求
3. AJAX 回调后，分析 Response 中 Media Query 的 min-width 和 max-width 语法，注意插件仅仅支持 min-width 和 max-width，分析出 viewport 变化区间对应相应的 CSS 块
4. 页面初始化时和 window.resize 时，根据当前 viewport 使用相应的 CSS 块

也就是说插件会多请求一次CSS文件，如果你的网站IE低版本的用户很少，那还是要考虑下使用这个插件是否值得。

使用结论

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

1. 需要使用远程的 URL 地址，不能使用普通本地的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 文件的运行有影响
4. 跨域可能会出现闪屏

插件总结

优点

• 压缩后仅1k
• 不跨域时性能很好
• 只需引入 respond.js 通用易用

缺点

• 仅支持 media query 的 min-width 和 max-width（用于响应式够用）
• 支持跨域，虽然配置有点麻烦，实现跨域代价高而且有闪屏体验欠佳。

相关链接

• https://github.com/scottjehl/Respond