IE6~8的響應式佈局怎麼用respond.js解決
- 一个新手原創
- 2017-09-07 09:54:381286瀏覽
響應式佈局，理想狀態是，對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;
}}外掛程式原理
#接下來，需要理解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
<!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>
<p class="wrap" id="con">
让IE6~8支持响应式布局</p>
</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>
其他的支援響應式佈局的插件-css3-mediaqueries-js
css3-mediaqueries-js官方文件和demo都沒有，相對於respond.js css3-mediaqueries -js支援幾乎所有的media query的語法。會出現閃屏。並不是很建議使用，雖然能夠支援全部的mediaqueries，但min-width和max-width其實可以滿足我們對響應式佈局的需要。
CDN的支援
考慮到IE9是支援CSS3的，所以直接在HTML頁面的head標籤中加入腳本引用即可：
以上是IE6~8的響應式佈局怎麼用respond.js解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！