使用方式
 
官方demo地址:http://scottjehl.github.com/Respond/test/test.html
1.在css中正常用 min/max-width media queries

2.引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果respond.js加载得很后面,这时重新根据media query解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象)

实现思路

  • 1.把head中所有<link rel=“sheetstyle” href=“xx”/>的css路径取出来放入数组
  • 2.然后遍历数组一个个发ajax请求
  • 3.ajax回调后仅分析response中的media query的min-width和max-width语法,分析出viewport变化区间对应相应的css块
  • 4.页面初始化时和window.resize时,根据当前viewport使用相应的css块

respond.js总结

优点:压缩后仅1k,不跨域时性能ok,只需引入respond.js通用易用
缺点:仅支持media query的min-width和max-width(用于响应式够用);支持跨域,虽然配置有点麻烦,实现跨域代价高而且有闪屏体验欠佳。

Respond.js让IE6-8支持CSS3 Media Query的更多相关文章

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

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

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

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

  3. 让IE支持CSS3 Media Query实现响应式Web设计

    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况 ...

  4. HTML-HTML5+CSS3权威指南阅读(二、让IE支持HTML5标签及对CSS3 Media Query的兼容)

    兼容解决 HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标 签<header>.<section>.<footer>等在IE8以下不会被识 ...

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

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

  6. 浏览器兼容问题系列---使IE支持CSS3 Media Quary

    兼容是一件很让前端攻城师头疼的事情,笔者今天在做一个Demo的时候就碰到了一个问题(大牛就不要拍砖了,谢谢!) 经常做移动互联网前端的攻城师想必对于css3 media quary已经很熟悉了,但是碰 ...

  7. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  8. CSS3 Media Query实现响应Web设计(宽度为不同的移动设备)

    现在的屏幕分辨率.小到320px(iPhone),大到2560px或甚至更高(大显示屏).范围内变化很大.除了使用传统的台式机.用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面. 这 ...

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

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

随机推荐

  1. kaggle之泰坦尼克的沉没

    Titanic 沉没 参见:https://github.com/lijingpeng/kaggle 这是一个分类任务,特征包含离散特征和连续特征,数据如下:Kaggle地址.目标是根据数据特征预测一 ...

  2. html5 视频

    HTML规定了一种通过video元素来包含视频的标准方法 一段HTML5视频不可缺少的元素有video.controls等.. 直到现在,仍然不存在一项在网页上显示视频的标准. 大多数视频是通过fla ...

  3. Xcode 常用快捷键及代码自动排版

    1. 文件CMD + N: 新文件CMD + SHIFT + N: 新项目CMD + O: 打开CMD + S: 保存CMD+OPt+S:保存所有文件CMD + SHIFT + S: 另存为CMD + ...

  4. ARM入门实践(一)----Mini6410上最简单的LED点灯裸机程序

    Mini6410上最简单的LED点灯裸机程序 : 实验环境: 根据友善教程,要用ADS,据说现在都不用这个了,但是为了打开友善给的mcp工程,就下了一个,Win7下弄上兼容模式和管理员权限,再下一个S ...

  5. GO语言基础

    Go语言开发 一.Linux下搭建Go开发环境 首先下载Go语言的开发安装包,不管是在官方网站或者国内的Golang镜像都是可以的,注意区分64位和32位的安装包. 下载完安装包之后tar zxvf进 ...

  6. imadjust函数分析一

    声明:本文涉及到的行数皆指本文提供的附件imadjust.m的代码中行数 本文只讨论imadjust函数是一种用法,即 J = IMADJUST(I,[LOW_IN; HIGH_IN],[LOW_OU ...

  7. Mac OS X和iOS上基本数据类型的字节数

    在Mac和IPhone上分别运行下面的程序: NSLog(@"char size = %lu", sizeof(char)); NSLog(@"short int siz ...

  8. mysql创建存储过程

    -- 创建CREATE PROCEDURE proDelAccountById(IN in_accountid int) BEGIN -- 执行sql预计 END -- 调用 ; CALL proDe ...

  9. sqlCacheDependency 更新缓存Cache

    第一步 修改web,config <!--定义数据库连接--> <connectionStrings>  <add name="NorthwindConnect ...

  10. 如何成为一个真正在路上的Linuxer

    Linux 是工具,却更像一个信仰. 写在前面: 本文目的不是教你如何成为一个真正的Linuxer,也没有能力教你成为一个真正的linuxer,而是通过笔者的一些想法试图指引你真正踏上学习linux之 ...