HTML5 respond.js 解决IE6~8的响应式布局问题
 
响 应式布局，理想状态是，对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器，但是IE8在市场当中仍然占据了比较大量的市 场份额，使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这样一个文件：respond.js。 文件下载地址：https://github.com/scottjehl/Respond（或者百度搜索respond.js）。自己在阅读了官方文档之后，进行了一系列测试。友情提示各位朋友，关于respond.js的使用，有一些需要注意的地方，一旦不注意，在IE6-8中就无法显示出来。至于有哪些方面，且听我慢慢道来。
 
第一步，书写基本样式
要想实现响应式布局，首先需要书写基本的响应式布局的样式。

html,body {
height: 100%;
}
@media only screen and (min-width: 480px){
body {
background: yellow;
}
}
@media only screen and (min-width: 640px) and (max-width: 1024px) {
body {
background: green;
}
}
@media screen and (min-width: 1024px){
body {
background: blue;
}
}

 

插件原理

接下来，需要理解respond.js的实现思路：
第一步，将head中所有外部引入的CSS文件路径取出来存储到一个数组当中；
第二步，遍历数组，并一个个发送AJAX请求；
第三步，AJAX回调后，分析response中的media query的min-width和max-width语法（注意，仅仅支持min-width和max-width），分析出viewport变化区间对应相应的css块；
第四步，页面初始化时和window.resize时，根据当前viewport使用相应的css块。
 
核心结论
那么此时，就可以根据基本的实现思路，得到一些书写代码时要注意的地方：
1、需要启动本地服务器（localhost），不能使用普通本地的url地址（file://开头）；
2、需要外部引入CSS文件，将CSS样式书写在style中是无效的；
3、由于respond插件是查找CSS文件，再进行处理，所以respond文件一定要放置在CSS文件的后面
4、另外，虽然把respond放置在head里还是在body后面都能够实现，但是建议放置在head中（具体原因在下面的文档提示中有提到）
5、最好不要为CSS设置utf-8的编码，使用默认（原因详见下面的文档提示部分）
 
欢迎沟通交流~独行冰海
 
文档提示
在官方文档当中的一些提示：
1、越早的引入respond.js文件，也就越可能避免IE下出现的闪屏。
2、不支持嵌套的媒体查询
3、utf-8的字符编码对respond.js文件的运行有影响
官方API原文：if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.
基本含义就是：utf-8格式的CSS文件字符编码会对插件造成影响。
但是在我使用IE6-8进行测试的时候，都能够正常显示（无论是在css文件中增加charset设置还是在link标签中增加charset设置）。因此，并不是太清楚这个位置bug的含义。
4、跨域可能会出现闪屏（还没有测试，具体情况不详）
 
实例demo
html文件部分

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5-响应式布局--respond.js-独行冰海</title>
<link rel="stylesheet" href="test.css" charset="utf-8">
<script src="respond.min.js"></script>
</head>
<body>
<div class="wrap" id="con">
让IE6~8支持响应式布局——独行冰海
</div>
</body>
</html>

注意：respond.min.js或者respond.src.js都可以使用，在上面给出的下载地址中下载即可。CSS部分就是最上面的那段代码。

 
显示效果（IE6，IE7-8的显示效果也是没有问题的，在此就不贴图处理了）：
 
有待研究
官方文档中尚未解读清晰的内容（主要是不太清晰如何应用）

<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

 
其他的支持响应式布局的插件-css3-mediaqueries-js
css3-mediaqueries-js官方文档和demo都没有，相对于respond.js css3-mediaqueries-js支持几乎所有的media query的语法。会出现闪屏。并不是很推荐使用，虽然能够支持全部的mediaqueries，但min-width和max-width其实就可以满足我们对响应式布局的需要。
 
欢迎沟通交流~独行冰海

HTML5 respond.js 解决IE6~8的响应式布局问题的更多相关文章

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

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

  2. 用JS更好的实现响应式布局

    响应式布局更加高效的方法: 代码实现 <script> $(function() { (function(){ var $html = $('html'); var $window = $ ...

  3. 响应式布局与bootstrap框架

    原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...

  4. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  5. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  6. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  7. 浅谈html5 响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...

  8. html5 响应式布局

    一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为 ...

  9. html5 响应式布局（媒体查询）

    响应式布局        响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.        响应式布局可以为不同终端的用户 ...

随机推荐

  1. 实现多表关联来方便你的SELECT查询功能

    这次来学习一下多表关联.比如在数据中创建下面几张表,你可以从主键PRIMARY KEY与外键FOREIGN KEY来看到这几张表它们之间的关系. 场所表[dbo].[SixS_Location]: 主 ...

  2. C#使用读写锁三行代码简单解决多线程并发写入文件时线程同步的问题

    (补充:初始化FileStream时使用包含文件共享属性(System.IO.FileShare)的构造函数比使用自定义线程锁更为安全和高效,更多内容可点击参阅) 在开发程序的过程中,难免少不了写入错 ...

  3. css特效

    1.页面淡入淡出 <html style="background:#0086b5"> <!--简易loading--> <div id="l ...

  4. 基于吉日嘎底层架构的Web端权限管理操作演示-日志管理

    权限管理要实现的效果是对“ 谁”可以访问“什么内容”,可以进行“哪些操作” 一系列权限的精细化控制.衡量一个软件好坏的重要标准是:它的权限体系是否足够细致.是否可以立体勾勒出信息对象的访问控制.前面4 ...

  5. TINYINT,SMALLINT,MEDIUMINT,INT,INTEGER,BIGINT;text,longtext,mediumtext,ENUM,SET等字段类型区别

    http://www.path8.net/tn/archives/951 MySQL支持大量的列类型,它可以被分为3类:数字类型.日期和时间类型以及字符串(字符)类型.本节首先给出可用类型的一个概述, ...

  6. 深度技术32位Win7系统Ghost版

    深度技术32位Win7系统Ghost版,GhostWin7是指使用Ghost软件做成压缩包的Windows7,俗称克隆版Win7.用克隆版的目的是节省安装时间.本作品在采用微软封装部署技术的基础上,结 ...

  7. 容器--IdentityHashMap

    一.概述 IdentityHashMap也是一类特殊的Map,根据其名字,Identity,即同一性,其表现出的具体特点便是,在判断Map中的两个key是否相等时,只通过==来判断,而不通过equal ...

  8. BZOJ 4619 Swap Space 解题报告

    今天是因为David Lee正好讲这个题的类似题,我才做了一下. 本题是world final 2016的一道水…… 题目地址如下 http://www.lydsy.com/JudgeOnline/p ...

  9. MYSQL 练习

    导出现有数据库数据: mysqldump -u用户名 -p密码 数据库名称 >导出文件路径           # 结构+数据 mysqldump -u用户名 -p密码 -d 数据库名称 > ...

  10. JSON字符串和java对象的互转【json-lib】

    在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级的数据格式比xml效率要高,XML需要很多的标签,这无疑占据了网络流量,JSON在这方面则做的很好, ...