首页 / JAVASCRIPT / IE6~8的响应式布局怎么使用respond.js解决

IE6~8的响应式布局怎么使用respond.js解决

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了IE6~8的响应式布局怎么使用respond.js解决，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3579字，纯文字阅读大概需要6分钟。

内容图文

　　响应式布局，理想状态是，对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

<!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>
        <p class="wrap" id="con">        
        让IE6~8支持响应式布局</p>
    </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标签中添加脚本引用即可：

以上就是IE6~8的响应式布局怎么使用respond.js解决的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的IE6~8的响应式布局怎么使用respond.js解决全部内容，希望文章能够帮你解决IE6~8的响应式布局怎么使用respond.js解决所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/298605.html

来源：【匿名】