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使用注意事项
- 必须在服务器环境下运行
- 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
respond.js的更多相关文章
- HTML5 respond.js 解决IE6~8的响应式布局问题
HTML5 respond.js 解决IE6~8的响应式布局问题 响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
- Respond.js – 让 IE6-8 支持 CSS3 Media Query
Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width ...
- Respond.js让IE6-8支持CSS3 Media Query
原文地址:http://caibaojian.com/respondjs.html 使用方式 官方demo地址:http://scottjehl.github.com/Respond/test ...
- js解决IE8不支持html5,css3的问题(respond.js 的使用注意)
IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js 是用来让ie8 ...
- css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题
respond.js插件实现原理 接下来,需要理解respond.js的实现思路: 第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中: 第二步,遍历数组,并一个个发送AJAX请 ...
- Media Queries之Respond.js
一.stackoverflow上面对css3-mediaqueries.js与respond.js的比较 css3-mediaqueries.js Pros Supports min, max and ...
- html5shiv.js和respond.js引入不起作用解决
当项目需求需要兼容ie7,8这些奇葩浏览器时,考虑到h5的便捷性及响应式,我们往往引入html5shiv.js和respond.js来让ie7,8兼容h5及一些响应式变化,引入时就需要用到条件注释,原 ...
- Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query
respond.min.js <script src="js/respond.min.js"></script> respond.min.js代码: /*! ...
- respond.js第六行 SCRIPT5: 拒绝访问。跨域问题
问题描述:respond.js第六行 SCRIPT5: 拒绝访问.昨天为学弟学妹讲bootstrap,说到对ie78的兼容问题,解决办法中有引入html5shiv.js和respond.js两个文件夹 ...
随机推荐
- Oracle自动备份脚本(网上找到的资料)
废话不多说了,直接给大家贴代码了,具体代码如下所示: ? 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 27 ...
- 智能车学习(二十二)——浅谈速度控制
一.经典PID控制 使用遇限反向PID会比较适合有加减速的车子,使用变速积分适合跑匀速的车子.然后这种方法的条件下,一定要尽可能缩短控制周期.. 二.PID加棒棒控制 针对 ...
- 权限管理AppOpsManager
AppOps工具类 import android.annotation.TargetApi; import android.app.AppOpsManager; import android.cont ...
- ExpandableListView 里面嵌套GridView实现高度自适应
很早之前做过一个商城的app 也是第一次做安卓. 实现的效果如下: 因为一开始做安卓,很多写的代码都不规范,在下面上代码的地方,还请高手指点(勿喷,楼主是自尊心很强的屌丝) 这个效果要解决2个大问题, ...
- POJ 1182 食物链 (经典带权并查集)
第三次复习了,最经典的并查集 题意:动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们 ...
- for的冒泡排序练习题
这是一个冒泡排序的方法,请汲取其中的思想.有一组数: 1,2,3,4,5,6请将这组数用降序排列.我们可以将数组里面的数两两相比,如果第二个数比第一个数大,那么将第二个数值与第一个数值交换,然后让其循 ...
- redis 的安装
1: redis 是什么 Redis is an open source (BSD licensed), in-memory data structure store, used as databas ...
- 使用递推解题:EOJ2999
题目: Description 给定一个多项式 (ax+by)k,计算多项式展开后 xnym 项的系数. Input 第1行:一个整数T(1≤T≤10)为问题数. 接下来共T行.每行5个整数,分别为a ...
- ai seek
原文地址链接:http://gamedevelopment.tutsplus.com/tutorials/understanding-steering-behaviors-seek--gamedev- ...
- java.io包详细解说
转自:http://hzxdark.iteye.com/blog/40133 hzxdark的博客 我不知道各位是师弟师妹们学java时是怎样的,就我的刚学java时的感觉,java.io包是最让我感 ...