首页 > 网站 > WEB开发 > 正文

Respond.js-----20150415

2024-04-27 14:27:34
字体:
来源:转载
供稿:网友
Respond.js-----20150415

Respond.js让IE6-8支持CSS3MediaQuery。

Bootstrap里面就引入了这个js文件,从名字看出来是自适应的兼容。打开IE看了一下,效果挺好的,自适应的效果挺好的。Respond.js让不支持CSS3MediaQuery的浏览器包括IE6-IE8等其他浏览器支持查询。的css路径取出来放入数组2.然后遍历数组一个个发Ajax请求3.ajax回调后仅分析response中的mediaquery的min-width和max-width语法,分析出viewport变化区间对应相应的css块4.页面初始化时和window.resize时,根据当前viewport使用相应的css块。使用:考虑到IE9是支持CSS3的,所以直接在HTML页面的head标签中添加脚本引用即可:<!--[ifltIE9]><scriptsrc="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]—>官方demo地址:http://scottjehl.github.com/Respond/test/test.html1.在css中正常用min/max-widthmediaqueries@mediascreenand(min-width:480px){...stylesfor480pxandupgohere}@mediascreenand(min-width:480px){...stylesfor480pxandupgohere}2.引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果respond.js加载得很后面,这时重新根据mediaquery解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象)
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表