Respond.js讓IE6-8支持CSS3 Media Query。
Bootstrap里面就引入了這個js文件,從名字看出來是自適應的兼容。打開IE看了一下,效果挺好的,自適應的效果挺好的。Respond.js讓不支持CSS3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
的css路徑取出來放入數組
2.然后遍歷數組一個個發ajax請求
3.ajax回調后僅分析response中的media query的min-width和max-width語法,分析出viewport變化區間對應相應的css塊
4.頁面初始化時和window.resize時,根據當前viewport使用相應的css塊。
使用:考慮到IE9是支持CSS3的,所以直接在HTML頁面的head標簽中添加腳本引用即可:
<!--[
if
lt IE 9]>
<script src=
"http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"
></script>
<![endif]—>
<!--[
if
lt IE 9]><script src =
"http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"
> </script><![endif]—>
官方demo地址:http:
//scottjehl.github.com/Respond/test/test.html 1.在css中正常用 min/max-width media queries
@media screen and (min-width: 480px){
...styles
for
480px and up go here
}
@media screen and (min-width: 480px){...styles
for
480px and up go here}
2.引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到頁面閃屏的概率就越低,因為最初css會先渲染出來,如果respond.js加載得很后面,這時重新根據media query解析出來的css會再改變一次頁面的布局等,所以看起來有閃屏的現象