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

posted @ 2016-01-28 10:12  wbxjiayou  阅读(1218)  评论(0)    收藏  举报