響應式布局，理想狀態是，對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/