前端开发 HTML5 CSS3 HTML CSS JavaScript jQuery Bootstrap

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

HTML5 HTML我帮您 1年前  30次浏览
Respond.js让不支持CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js。Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
文件下载地址:https://github.com/scottjehl/Respond。自己在阅读了官方文档之后,进行了一系列测试。友情提示各位朋友,关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来。至于有哪些方面,且听我慢慢道来。

要想实现响应式布局,首先需要书写基本的响应式布局的样式。
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>解决IE6~8的HTML5响应式布局问题Respond.js-HTML580.com</title>
    <style type="text/css">
        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;
            }
        }
    </style>
    <script src="https://github.com/scottjehl/Respond/blob/master/src/respond.js"></script>
</head>
<body>
    <div class="wrap" id="con">
        解决IE6~8的HTML5响应式布局问题Respond.js-HTML580.com
    </div>
</body>
</html>

插件原理
接下来,需要理解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地址;
2、需要外部引入CSS文件,将CSS样式书写在style中是无效的;
3、由于respond插件是查找CSS文件,再进行处理,所以respond文件一定要放置在CSS文件的后面
4、另外,虽然把respond放置在head里还是在body后面都能够实现,但是建议放置在head中(具体原因在下面的文档提示中有提到)
 

发表评论