侵權舉報/版權申訴以下是【金聰采編】分享的內容全文：
響應式布局，理想狀態是，對PC/移動各種終端進行響應。媒體查詢的支持程度是IE9+以及其他現代的瀏覽器，但是IE8在市場當中仍然占據了比較大量的市場份額，使我們不得不進行IE低端瀏覽器的考慮。那么如何在IE6~8瀏覽器中兼容響應式布局呢？這里我們需要借助這樣一個文件：respond.js。文件下載地址：https://github.com/scottjehl/Respond（或者百度搜索respond.js）。自己在閱讀了官方文檔之后，進行了一系列測試。友情提示各位朋友，關于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; }}插件原理
接下來，需要理解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、跨域可能會出現閃屏（還沒有測試，具體情況不詳））
實例demo
html文件部分
<!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部分就是最上面的那段代碼。
顯示效果（IE6，IE7-8的顯示效果也是沒有問題的，在此就不貼圖處理了）：
有待研究
官方文檔中尚未解讀清晰的內容（主要是不太清晰如何應用）
<!-- 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>
