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

转载于:https://www.cnblogs.com/wbxjiayou/p/5165341.html