css3 @media支援ie8用respond.js 解決IE6~8的響應式布局問題

標籤：window   head   服務   style   變化   字元   media   charset   提示   

respond.js外掛程式實現原理接下來，需要理解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、跨域可能會出現閃屏（還沒有測試，具體情況不詳）

css3 @media支援ie8用respond.js 解決IE6~8的響應式布局問題