- 浏览: 43141 次
- 性别:
- 来自: 深圳
最新评论
响应式布局,理想状态是,对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 3721,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 925JavaScript中的对象属性有两种: 一,数据 ... -
JavaScript闭包
2019-01-17 12:02 0要想真正理解闭包首先要先搞清楚作用域和作用域链。 1,作 ... -
常用收藏
2019-01-16 11:11 330参考链接 MongoDB用户权限管理 https:/ ... -
浏览器中进程与线程
2019-01-05 18:06 1192一,首先使用快捷键Shift+Esc打开浏览器Chrome任 ... -
Flex
2018-12-30 15:42 9262009年,W3C提出了一种新的布局方式:Flex布局。 ... -
linux下建立git仓库
2018-12-28 14:51 534参考文件 https://www.cnblogs.com/ ... -
Express中异常处理
2018-12-26 17:36 1276下面内容摘自网络文章,分析的很全面。 文章地址:http ... -
Express中如何使用async/await
2018-12-26 15:31 1226随着Node.js v7.6.0版本开 ... -
查看端口占用
2018-10-09 23:27 478参考:https://www.jianshu.com/p/ ... -
GIt部署到linux服务器
2018-09-30 12:01 922git一键部署代码到远程 ... -
JavaScript中常见继承方式
2018-09-14 18:16 544JavaScript作为弱类型语言,继承也是其强大的特性之 ... -
Node.js版本管理工具nvm
2018-09-09 10:52 569nvm是什么? 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 362----------------------------- ...
相关推荐
响应式布局,理想状态是,对PC/移动...那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js。关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来。
ie8浏览器下,bootstrap3样式失效,在页面中引用respond.min.js和html5shiv.js ,兼容bootstrap3
想让IE8跑起bootstrap吗?这个就是你们需要的!
html5版本支持合集,包含excanvas.min.js html5.js html5shiv.js respond.min.js,让IE(包括IE6)支持HTML5元素和特性
让Bootstrap 3兼容IE8浏览器 所需要的一个JS respond.js respond.min.js respond.src.js
html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。 respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
<!-- 只让 IE 8 以及更低版本的浏览器下载该脚本 --> <!--[if (lt IE 9) & (!IEMobile)]> <script src="js/vendor/respond.min.js"> <![endif]-->
解决IE678不支持 Media 响应式布局的js
Respond.js 是一个小脚本,支持在浏览器中使用CSS3媒体查询功能。 标签:Respond
此文件用于开发响应式网站,兼容老IE支持css3的媒体查询技术,让其可做出响应。
ie8和ie9浏览器下兼容问题; 1、bootstrap3部分样式失效,在页面中引用respond.min.js和html5shiv.min.js ; 2、另外提供formData不可用情况下使用的jquery.form.min.js资源文件
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/1880369
解决bootstrap 3 IE8兼容性问题 研究了下getbootstrap.com网站在IE8下是正常的,他们采取的解决办法是: <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!--...
Respond.js–让 IE6-8 支持 CSS3 Media Query