建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

让IE等低版本浏览器支持CSS3媒体查询功能的JS插件respond.js

来源:易助科技网浏览量:10收藏

简介


让IE等低版本浏览支持CSS3媒体查询功能插件。


注意事项:


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设置);

4、跨域可能会出现闪屏。



使用


1.  引入 respond.js 文件


2. 简单用法


//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;}}

//header
<head>
  <meta charset="UTF-8">
  <title>HTML5-响应式布局--respond.js</title>
  
  <script src="respond.min.js"></script>
</head>

<div class="wrap" id="con">
  让IE6~8支持响应式布局——独行冰海
</div>



相关链接


GitHub 地址 :https://github.com/scottjehl/Respond