respond.js

Respond.js，低版本浏览器也能够支持媒体查询

在之前有篇文章也是介绍IE6,7,8支持媒体查询的（查看），Respond.js这个比css3-mediaqueries更为强大一些，它可以支持link标签的媒体查询，下面介绍它的使用方法和注意事项。

案例如下：

html


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>ie6,7,8支持浏览器响应式布局</title>

    <link rel="stylesheet" type="text/css" href="t320.css" media="only screen and (max-width:320px)">

    <link rel="stylesheet" type="text/css" href="t321.css" media="only screen and (min-width:321px)">

    <!--[if lt ie 9]>

        <script src="Respond-master/Respond-master/dest/respond.min.js"></script>

    <![endif]-->

    </head>

    

    <body>

    <div class="d1">

        注意：

        1、必须在服务器环境下运行

        2、css文件必须引用在respond.min.js之前

        支持：

        1、link标签的媒体查询条件

        2、css文件中写入媒体查询条件

        不支持条件：

        1、不支持@import导入

        2、不支持style标签写入

    </div>

    </body>

    </html>

t320.css文件内容：


1

2

3

4

5

@charset "utf-8";

    .d1{

        height:50px;

        

    }

t321.css文件内容：


1

2

3

4

5

@charset "utf-8";

    .d1{

        height:50px;

        

    }

Respond.js使用注意事项

  1. 必须在服务器环境下运行
  2. css文件必须引用在respond.js之前，否则无效果
  3. 它并不是支持所有的媒体查询条件，详情查看GitHub

Respond.js支持以下写法：

  1. link标签的媒体查询条件
  2. css文件中写入媒体查询条件

Respond.js不支持以下情况：

  1. 不支持@import导入
  2. 不支持style标签写入

Respond.js下载地址：

GitHub：https://github.com/scottjehl/Respond/

百度网盘（GitHub下载）：http://pan.baidu.com/s/1mgzFMGS

时间： 2024-10-29 19:13:44

respond.js的相关文章

ie8响应式兼容方案,respond.js的用法及使用时无效的解决办法

响应式布局,html5和css3,ie8不支持,可以通过respond.js插件来实现响应. 用法注意事项 一,css样式表内容.要放在css文件中, 二,css文件必须是无bom头格式的编码文件 三,css文件必须放在head标签内进行引用.放在html中的body中引用无效. 四,css文件必须放在respond.js之前引用,respond.js可以放在body或网页底部,但为了防止闪屏,建议放在head中. 用法示例 <!doctype html> <html> <h

样式文件跨域导致Respond.js插件在IE浏览器失效的问题

Respond.js主页: https://github.com/scottjehl/Respond Respond.js是为了解决IE6-IE8不支持响应式设计而编写的一个插件,可以实现css3的媒体查询,官方演示地址:https://rawgit.com/scottjehl/Respond/master/test/test.html 在Chrome.Firefox.IE浏览器测试官方给出的页面都是正常的,网页背景色会随着浏览器窗口的大小改变.可以看到该页面的样式文件和测试页面本身都是在同一个

css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题

respond.js插件实现原理 接下来,需要理解respond.js的实现思路: 第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中: 第二步,遍历数组,并一个个发送AJAX请求: 第三步,AJAX回调后,分析response中的media query的min-width和max-width语法(注意,仅仅支持min-width和max-width),分析出viewport变化区间对应相应的css块: 第四步,页面初始化时和window.resize时,根据当前viewp

Respond.js的作用

在html页面中我们经常看到 <!--[if lt IE 9]>    //判断当前浏览器的版本是否小于IE 9          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js

Respond.js让IE6-8支持CSS3 Media Query

Bootstrap里面就引入了这个js文件,从名字看出来是自适应的兼容.打开IE看了一下,效果挺好的,自适应的效果挺好的.Respond.js让不支持CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询. 使用方式 官方demo地址:http://scottjehl.github.com/Respond/test/test.html 1.在css中正常用 min/max-width media queries @media screen and (min-width:

HTML5 respond.js 解决IE6~8的响应式布局问题

响应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑. 那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js.文件下载地址:https://github.com/scottjehl/Respond. 友情提示各位朋友,关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来. 一

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语法,分析出viewpo

js解决IE8不支持html5，css3的问题（respond.js 的使用注意）

IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js  是用来让ie8浏览器能将h5标签转化为块元素 respond.js   是让ie8支持css3的js <!--[if lt IE9]> <script src="html5.js"></script> <script src="Respond.js&q

respond.min.js

Bootstrap 入门[转]:http://www.cnblogs.com/linjiqin/p/3557661.html Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 ... 4 </html> 引入respond.min.js说明Internet Explorer 8