首頁 > 文章 > web前端 > IE6~8的響應式佈局怎麼用respond.js解決

IE6~8的響應式佈局怎麼用respond.js解決

一个新手原創: 2017-09-07 09:54:381269瀏覽

　　響應式佈局，理想狀態是，對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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：一招教你滑鼠右鍵如何屏蔽下一篇：一招教你滑鼠右鍵如何屏蔽

看更多