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

respond.js的更多相关文章

  1. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  2. Respond.js – 让 IE6-8 支持 CSS3 Media Query

    Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width ...

  3. Respond.js让IE6-8支持CSS3 Media Query

    原文地址:http://caibaojian.com/respondjs.html   使用方式   官方demo地址:http://scottjehl.github.com/Respond/test ...

  4. js解决IE8不支持html5，css3的问题（respond.js 的使用注意）

    IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js  是用来让ie8 ...

  5. css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题

    respond.js插件实现原理 接下来,需要理解respond.js的实现思路: 第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中: 第二步,遍历数组,并一个个发送AJAX请 ...

  6. Media Queries之Respond.js

    一.stackoverflow上面对css3-mediaqueries.js与respond.js的比较 css3-mediaqueries.js Pros Supports min, max and ...

  7. html5shiv.js和respond.js引入不起作用解决

    当项目需求需要兼容ie7,8这些奇葩浏览器时,考虑到h5的便捷性及响应式,我们往往引入html5shiv.js和respond.js来让ie7,8兼容h5及一些响应式变化,引入时就需要用到条件注释,原 ...

  8. Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query

    respond.min.js <script src="js/respond.min.js"></script> respond.min.js代码: /*! ...

  9. respond.js第六行 SCRIPT5: 拒绝访问。跨域问题

    问题描述:respond.js第六行 SCRIPT5: 拒绝访问.昨天为学弟学妹讲bootstrap,说到对ie78的兼容问题,解决办法中有引入html5shiv.js和respond.js两个文件夹 ...

随机推荐

  1. 为什么要使用 Node.js

    这是一个移动端工程师涉足前端和后端开发的学习笔记,如有错误或理解不到位的地方,万望指正. Node.js 是什么 传统意义上的 JavaScript 运行在浏览器上,这是因为浏览器内核实际上分为两个部 ...

  2. Emacs 之窗口管理

    // */ // ]]> Emacs 之窗口管理 Table of Contents 1. Emacs 窗口相关 1.1. Emacs 里调整 window 大小 1.2. Emacs winn ...

  3. STL中容器的push()或者push_back()函数的一点说明

    在STL的queue 或者 vector.list等容器适配器或者容器中,会经常用到的函数就是push()或者push_back()函数,但是有一点需要明确的是: 在使用这些函数对容器/适配器对象增加 ...

  4. Redis 的 5 个常见使用场景

    2015-07-22 23:31:46 本文由 伯乐在线 - 刘晓鹏 翻译,黄利民 校稿.未经许可,禁止转载!英文出处:Joe Engel.欢迎加入翻译组. 在这篇文章中,我们将阐述 Redis 最常 ...

  5. RDLC的部署(无法找到Microsoft.ReportViewer.ProcessingObjectModel.dll文件)

    CMD命令:C:\Windows\assembly\GAC_MSIL\ rdlc 相比微软的其他产品来说,做得还真是够烂的了,比水晶报表也烂得多. 但不知为何我还是宁可先择 rdlc.并且渐渐上手了. ...

  6. css整理－03 文本

    缩进和水平对齐 缩进文本:text-indent 可以设置为负值 可以为所有块级元素应用,但无法应用到行内元素,图像之类的替换元素: 水平对齐: text-align left,center,righ ...

  7. jquery.easing.js的使用

    jquery.easing.js是个好东西,各种动画效果扩展,加强和丰富了jquery自带的各种动画函数 box点击就会像移动出弹簧效果,$(obj).animate(目前状态,时间,效果,回调函数) ...

  8. UVa1212 Duopoly（最小割）

    题目大概说有两家通讯公司,它们分别有几个投标,投标各有价值且各个投标都包含几个频道,相同公司的各个投标包含频道都是互不相同的,而频道不能被同时选用.问怎么选择采取哪家公司哪些投标使得价值最大. 如此建 ...

  9. 【原】iOS多线程之NSThread、NSOperationQueue、NSObject和GCD的区别

    区别: Thread: 是这几种方式里面相对轻量级的,但也是使用起来最负责的,你需要自己管理thread的生命周期,线程之间的同步.线程共享同一应用程序的部分内存空间, 它们拥有对数据相同的访问权限. ...

  10. TML5如何在移动网页端调用手机图片或者camera

    TML5如何在移动网页端调用手机图片或者camera可以参考这篇文章: 如果你开始基于iOS系统(ios6 above) 的web应用,可以考虑这段代码: 点击按钮,会调用你的摄像头相册 附源码文件: ...