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

来源：易助科技网浏览量：8收藏

简介

让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>

建站资源下载详情

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

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

简介

使用

1. 引入 respond.js 文件

2. 简单用法

相关链接