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

lovehuayud 2017-05-22

响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。

那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js。文件下载地址:https://github.com/scottjehl/Respond。

友情提示各位朋友,关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来。

一、书写基本样式

要想实现响应式布局,首先需要书写基本的响应式布局的样式。

复制代码

html,body{

height:100%;

}

@mediaonlyscreenand(min-width:480px){

body{

background:yellow;

}

}

@mediaonlyscreenand(min-width:640px)and(max-width:1024px){

body{

background:green;

}

}

@mediascreenand(min-width:1024px){

body{

background:blue;

}

}

复制代码

二、插件原理

接下来,需要理解respond.js的实现思路:

第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中;

第二步,遍历数组,并一个个发送AJAX请求;

第三步,AJAX回调后,分析response中的mediaquery的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原文:ifCSSfilesareencodedinUTF-8withByte-Order-Mark,theywillnotworkwithRespond.jsinIE7orIE8.

基本含义就是:utf-8格式的CSS文件字符编码会对插件造成影响。

但是在我使用IE6-8进行测试的时候,都能够正常显示(无论是在css文件中增加charset设置还是在link标签中增加charset设置)。因此,并不是太清楚这个位置bug的含义。

4、跨域可能会出现闪屏(还没有测试,具体情况不详)

五、实例demo

html文件部分

复制代码

<!doctypehtml>

<html>

<head>

<metacharset="UTF-8">

<title>HTML5-响应式布局--respond.js-独行冰海</title>

<linkrel="stylesheet"href="test.css"charset="utf-8">

<scriptsrc="respond.min.js"></script>

</head>

<body>

<divclass="wrap"id="con">

让IE6~8支持响应式布局——独行冰海

</div>

</body>

</html>

复制代码

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

显示效果(IE6,IE7-8的显示效果也是没有问题的,在此就不贴图处理了):

有待研究

官方文档中尚未解读清晰的内容(主要是不太清晰如何应用)

<!--Respond.jsproxyonexternalserver-->

<linkhref="http://externalcdn.com/respond-proxy.html"id="respond-proxy"rel="respond-proxy"/>

<!--Respond.jsredirectlocationonlocalserver-->

<linkhref="/path/to/respond.proxy.gif"id="respond-redirect"rel="respond-redirect"/>

<!--Respond.jsproxyscriptonlocalserver-->

<scriptsrc="/path/to/respond.proxy.js"></script>

其他的支持响应式布局的插件-css3-mediaqueries-js

css3-mediaqueries-js官方文档和demo都没有,相对于respond.jscss3-mediaqueries-js支持几乎所有的mediaquery的语法。会出现闪屏。并不是很推荐使用,虽然能够支持全部的mediaqueries,但min-width和max-width其实就可以满足我们对响应式布局的需要。

CDN的支持

考虑到IE9是支持CSS3的,所以直接在HTML页面的head标签中添加脚本引用即可:

<!--[ifltIE9]><scriptsrc="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->

相关推荐