respond.js有什么作用?


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會再改變一次頁面的布局等,所以看起來有閃屏的現象


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM