HTML5 respond.js 解决IE6~8的响应式布局问题
响应式布局，理想状态是，对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器，但是IE8在市场当中仍然占据了比较大量的市场份额，使我们不得不进行IE低端浏览器的考虑。
那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这样一个文件：respond.js。文件下载地址：https://github.com/scottjehl/Respond。
友情提示各位朋友，关于respond.js的使用，有一些需要注意的地方，一旦不注意，在IE6-8中就无法显示出来。
一、书写基本样式
html,body { height: 100%; } @media only screen and (min-width: 480px){ body { background: yellow; } } @media only screen and (min-width: 640px) and (max-width: 1024px) { body { background: green; } } @media screen and (min-width: 1024px){ body { background: blue; } }
二、插件原理
三、核心结论
四、文档提示
五、实例demo
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5-响应式布局--respond.js-独行冰海</title> <link rel="stylesheet" href="test.css" charset="utf-8"> <script src="respond.min.js"></script> </head> <body> <div class="wrap" id="con"> 让IE6~8支持响应式布局——独行冰海 </div> </body> </html>
注意：respond.min.js或者respond.src.js都可以使用，在上面给出的下载地址中下载即可。CSS部分就是最上面的那段代码。
<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>
CDN的支持
考虑到IE9是支持CSS3的，所以直接在HTML页面的head标签中添加脚本引用即可：
<!--[
if
lt IE 9]>
<script src =
"http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"
></script>
<![endif]-->
来自于http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201410745621487/