在之前有篇文章也是介绍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-320px)"> <link rel="stylesheet" type="text/css" href="t321.css" media="only screen and (min-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使用注意事项
- 必须在服务器环境下运行
- css文件必须引用在respond.js之前，否则无效果
- 它并不是支持所有的媒体查询条件，详情查看GitHub
Respond.js支持以下写法：
- link标签的媒体查询条件
- css文件中写入媒体查询条件
Respond.js不支持以下情况：
- 不支持@import导入
- 不支持style标签写入
Respond.js下载地址：
GitHub：https://github.com/scottjehl/Respond/
百度网盘（GitHub下载）：http://pan.baidu.com/s/1mgzFMGS