解读一淘网(etao)首页响应式兼容ie6~ie8实现方法

渴切(keqie.com)讯:近段时间一直忙于渴切v3.1的升级工作 ,为了给渴切 添加ie6~ie8的响应支持,研究了不少的响应式网站,不管是国外的还是国内的。 这块国内资料比较少 ,于是打开谷歌英文版 搜索“response css framework”类似关键词的查询, 发现国外的响应是不用兼容ie6~ie8的。
然后试着搜索了一下“css3 response ie6 js”关键词,发现了两个重要的插件。Respond.js 和 css3-mediaqueries.js

这两款插件是用于解决ie6~ie8不支持响应的js解决方案。从口碑上来讲,Respond.js 能够兼容主流的css3媒体查询的语法,响应快,轻量级。
css3-mediaqueries.js更强大 ,兼容所有css3媒体查询语法。但是响应远远不及上者。文件相比也大很多倍。

然后我针对两个插件做了大量的demo来测试,发现在ie6~ie8下都没有效果,在谷歌上一查发现测试不成功的人大有所在,然后这个方案放弃。后来我一直在想有没有办法不用插件 ,把ie6~ie8的响应支持直接做到 渴切 cutter.js文件里面。这样调用起来方便,不用加载第三方额外的代码。 但是这样就要彻底的搞清楚 ie6~ie8响应的解决方案的原理是什么?

于是发现了 adapt.js ,这个文件的原理是js判断浏览器的宽度,来加载不同的css代码,所以这个解决方案需要预设很多不同的 css文件 ,例如 w1200.css, w960.css ,w768.css .. 。渴切 如果用这种方案就必须要增加额外的js文件和好多个css文件,这样就变得臃肿,打破了渴切最开始的初衷 — 简约而不简单。

这个时候又发现了一淘网,这个网站在ie6~ie8下是具有响应式效果的,这块让我很兴奋,于是我又下载了一淘网的文件下来研究,对多于的代码一行行去除,终于,发现了这个秘密。于是立马动手把这个解决方案增加到了渴切 cutter.css 和 cutter.js文件里面。于是渴切v3.1如期发布了。

简单说一下 渴切 实现原理:

通过js判断浏览器的宽度来给html标签添加不同的class。 当宽度在1200以上区间的时候 ,添加 class=“w1200”的类 ,当宽度区间在 960~1200之间的时候,添加class=“w960”的类。当屏幕发生改变时,触发这个判断。
然后添加css

.w960 .row{...}
.w960 .one{...} .w960 .two{...}

就这样,还是渴切 原来的12列栅格系统,现在就增加了ie6~ie8的响应式支持。并且无需要任何第三方插件。

渴切v3下载地址:http://www.keqie.com

金牌狙击手

52html5是一个web前端|html5资源平台,为广大html5开发者及爱好者提供html5相关的教程、资讯、html5游戏、html5教程等,并涉及css3、javascript前端知识。