請在后臺配置參數,參數名稱:topads
前端開發 HTML5 CSS3 HTML CSS JavaScript jQuery Bootstrap

解決IE6~8的HTML5響應式布局問題Respond.js

HTML5 HTML我幫您 1年前  6430次瀏覽
Respond.js讓不支持CSS3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
響應式布局,理想狀態是,對PC/移動各種終端進行響應。媒體查詢的支持程度是IE9+以及其他現代的瀏覽器,但是IE8在市場當中仍然占據了比較大量的市場份額,使我們不得不進行IE低端瀏覽器的考慮。那么如何在IE6~8瀏覽器中兼容響應式布局呢?這里我們需要借助這樣一個文件:respond.js。Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
文件下載地址:https://github.com/scottjehl/Respond。自己在閱讀了官方文檔之后,進行了一系列測試。友情提示各位朋友,關于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就無法顯示出來。至于有哪些方面,且聽我慢慢道來。

要想實現響應式布局,首先需要書寫基本的響應式布局的樣式。
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>解決IE6~8的HTML5響應式布局問題Respond.js-HTML580.com</title>
    <style type="text/css">
        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;
            }
        }
    </style>
    <script src="https://github.com/scottjehl/Respond/blob/master/src/respond.js"></script>
</head>
<body>
    <div class="wrap" id="con">
        解決IE6~8的HTML5響應式布局問題Respond.js-HTML580.com
    </div>
</body>
</html>

插件原理
接下來,需要理解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地址;
2、需要外部引入CSS文件,將CSS樣式書寫在style中是無效的;
3、由于respond插件是查找CSS文件,再進行處理,所以respond文件一定要放置在CSS文件的后面
4、另外,雖然把respond放置在head里還是在body后面都能夠實現,但是建議放置在head中(具體原因在下面的文檔提示中有提到)
 

發表評論

腾讯彩票兑奖