respond.js

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

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

案例如下：

html

<!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文件内容：

@charset "utf-8";

.d1{

height:50px;

}

t321.css文件内容：

@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

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

respond.js相关推荐

低版本浏览器支持css3 Media查询的方法, ie6-ie8 不支持css3 的时候用respond.js，html5shiv.js 【非常实用哦】。。。。。。。。。。。。...
Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width ...
客户端脚本selectivizr，PIE，Respond.js
CSS很强大的一点是,它具有很强的向前兼容性:如果浏览器不识别某个属性或值,它会忽略这个声明:如果不识别某个选择器,它会忽略整个规则. 这意味着新的选择器.属性和值,不会对老的浏览器产生严重影响.因此 ...
Respond.js让IE6-8支持CSS3 Media Query
原文地址: http://caibaojian.com/respondjs.html 实现思路 1.把head中所有<link rel="sheetstyle" href=& ...
解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js，以及excanvas.js解决低版本IE不支持canvas的问题...
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
Respond JS有什么作用
Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width ...
respond.js IE8使用
在经过按照 https://github.com/scottjehl/Respond 的安装引导安装之后,发现它跟bootstrap合作很不愉快!根!本!不!起!作!用!于是研究了一下它demo文件. ...
Media Queries之Respond.js
一.stackoverflow上面对css3-mediaqueries.js与respond.js的比较 css3-mediaqueries.js Pros Supports min, max and ...
respond.min.js/respond.js下载
respond.js/respond.min.js让IE6-8支持CSS3 Media Query 下载地址:/UserFiles/file/20150118/20150118152746_147.r ...
html5加js兼容性辅助,解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js，以及excanvas.js解决低版本IE不支持canvas的问题...
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...

respond.js

respond.js相关推荐

最新文章

热门文章