yuyongkun4519
- 浏览: 44858 次
- 性别:
- 来自: 深圳
-
最新评论
响应式布局，理想状态是，对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器，但是IE8在市场当中仍然占据了比较大量的市场份额，使我们不得不进行IE低端浏览器的考虑。
那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这样一个文件：respond.js。文件下载地址：https://github.com/scottjehl/Respond。
友情提示各位朋友，关于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其实就可以满足我们对响应式布局的需要。
CDN的支持
考虑到IE9是支持CSS3的，所以直接在HTML页面的head标签中添加脚本引用即可：
<!--[if lt IE 9]><script src = "http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->
那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这样一个文件：respond.js。文件下载地址：https://github.com/scottjehl/Respond。
友情提示各位朋友，关于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其实就可以满足我们对响应式布局的需要。
CDN的支持
考虑到IE9是支持CSS3的，所以直接在HTML页面的head标签中添加脚本引用即可：
<!--[if lt IE 9]><script src = "http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->
分享到：
发表评论
-
ES6 Array常用Api详解
2019-05-06 11:41 4081，Array.of Array.of方法用于将一组值， ... -
JavaScript基础
2019-03-23 21:23 01，数据类型 在JavaScri ... -
gulp
2019-03-21 10:25 0正则路径 https://blog.csdn.net/wi ... -
vue声明周期
2019-02-25 21:51 0vue -
Vue生命周期 VS React生命周期
2019-01-29 11:12 0Vue生命周： beforeCreate: c ... -
JavaScript 对象属性
2019-01-23 10:57 955JavaScript中的对象属性有两种： 一，数据 ... -
JavaScript闭包
2019-01-17 12:02 0要想真正理解闭包首先要先搞清楚作用域和作用域链。 1，作 ... -
常用收藏
2019-01-16 11:11 362参考链接 MongoDB用户权限管理 https:/ ... -
浏览器中进程与线程
2019-01-05 18:06 1227一，首先使用快捷键Shift+Esc打开浏览器Chrome任 ... -
Flex
2018-12-30 15:42 9522009年，W3C提出了一种新的布局方式：Flex布局。 ... -
linux下建立git仓库
2018-12-28 14:51 571参考文件 https://www.cnblogs.com/ ... -
Express中异常处理
2018-12-26 17:36 1335下面内容摘自网络文章，分析的很全面。 文章地址：http ... -
Express中如何使用async/await
2018-12-26 15:31 1270随着Node.js v7.6.0版本开 ... -
查看端口占用
2018-10-09 23:27 535参考：https://www.jianshu.com/p/ ... -
GIt部署到linux服务器
2018-09-30 12:01 957git一键部署代码到远程 ... -
JavaScript中常见继承方式
2018-09-14 18:16 568JavaScript作为弱类型语言，继承也是其强大的特性之 ... -
Node.js版本管理工具nvm
2018-09-09 10:52 604nvm是什么？ nvm允许你在同一台机器上安装不同版 ... -
字符编码的发展历史
2018-09-08 09:52 0字符编码的发展历史 Unicode和UTF-8有何区别？ ... -
nodejs-buffer
2018-09-07 18:13 0公所周知JavaScript语言不能处理二进制数据，但在服务 ... -
Git学习笔记
2018-09-04 18:07 387----------------------------- ...
相关推荐
响应式布局，理想状态是，对PC/移动...那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这样一个文件：respond.js。关于respond.js的使用，有一些需要注意的地方，一旦不注意，在IE6-8中就无法显示出来。
`respond.js`是一个轻量级的JavaScript库，由Jeffrey Way创建，它为不支持媒体查询的浏览器（如IE8）提供了后退支持，从而使得Bootstrap在这些浏览器上也能展现出响应式特性。 首先，我们需要理解响应式设计的概念...
通过这种方式，Bootstrap 3等基于媒体查询的框架可以在这些老版本的IE浏览器上实现响应式布局。 在Bootstrap 3中，`respond.js`是实现跨浏览器兼容性的重要组件。Bootstrap 3的设计依赖于媒体查询来定义不同屏幕...
4. respond.min.js：这个库是用来在旧版IE中实现CSS3媒体查询（Media Queries）的支持，这是响应式网页设计的关键技术。响应式设计允许网页根据不同的设备和屏幕尺寸自动调整布局，提供最佳的用户体验。Respond.min....
这是因为响应式布局依赖于CSS媒体查询，而JavaScript文件则处理交互和组件功能。这样可以确保先加载响应式规则，再加载交互元素。 为了更好地利用这个库，你需要了解如何编写和应用媒体查询。媒体查询的基本语法是 ...
"respond.js" 是一个JavaScript库，由Scott Jehl创建，它主要用于解决老版本Internet Explorer（尤其是IE6到IE8）对CSS3媒体查询不支持的问题。媒体查询是响应式设计的核心技术，允许开发者根据用户的设备特性，如...
`html5shiv`是一个小巧的JavaScript文件，主要解决IE6到IE8浏览器对于HTML5新元素（例如`<section>`, `<article>`, `<header>`, `<footer>`等）无法识别并进行样式渲染的问题。在这些老版本的IE浏览器中，如果不借助...
在这些老版本的IE浏览器中，响应式设计无法正常工作，因为它们不支持CSS3的媒体查询，这是实现响应式布局的核心技术。 "respond.min.js"的工作原理是动态注入CSS媒体查询，模拟对媒体查询的处理，使得IE8能够理解并...
解决IE678不支持 Media 响应式布局的js
`html5shiv.min.js` 是一个JavaScript库，主要用于解决IE8及以下版本对HTML5新元素不支持的问题。在HTML5中，新增了很多语义化标签，如`<header>`, `<nav>`, `<section>`, `<article>`, `<aside>` 和 `<footer>`等，...
Respond.js是一个轻量级的JavaScript库，它允许IE6至IE8支持CSS3媒体查询，从而实现响应式设计。该插件的亮点在于其快速响应和低资源占用，但它的功能相对有限，仅能兼容主流的CSS3媒体查询语法。 另一方面，css3-...
4. **Respond.js**: `respond.min.js`是一个轻量级的JavaScript文件，用于为不支持CSS3媒体查询的浏览器（主要是旧版IE）提供响应式布局的支持。响应式设计能让网站根据用户的设备屏幕尺寸自动调整布局，从而提高在...
`respond.min.js`则填补了这个空白，它解析CSS中的Media Queries，并在不支持的浏览器中模拟其行为，使得这些老版本的浏览器也能实现响应式布局。 在实际使用中，通常我们会将这两个脚本通过条件注释的方式引入到...
2. `respond.min.js`: 这个文件是Scott Jehl创建的，用于在不支持CSS3媒体查询的IE6-8浏览器中提供响应式设计支持。响应式设计允许网页根据用户设备的屏幕尺寸和方向自动调整布局，而媒体查询是实现这一目标的关键...
Bootstrap是一款广泛使用的前端框架，由Twitter开发，旨在提供一套简洁、直观、强大的工具，用于构建响应式布局和移动设备优先的Web项目。然而，Bootstrap原生版本并不支持Internet Explorer 8（IE8）及以下版本，...
为了解决这个问题，我们可以引入respond.min.js。这个脚本提供了对CSS3媒体查询的兼容性支持，使得网站可以自适应不同屏幕大小，无论是在桌面还是移动设备上都能提供良好的视觉体验。 在使用html5shiv和respond.min...
2. ** HTML5shiv **：这是一个用于IE6-IE9的JavaScript解决方案，用于让这些旧版浏览器识别和应用HTML5的新元素。Bootstrap使用了许多HTML5元素，没有这个库，这些元素的样式可能无法正确应用。 3. ** CSS ...
这段代码会在IE9及以下版本加载`html5shiv`（用于渲染HTML5新元素）和`respond.min.js`（用于响应式设计的媒体查询 polyfill）。 5. **jQuery和库**: 使用jQuery可以帮助简化跨浏览器的JavaScript开发，许多jQuery...