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

tyshymy 发布于 2013/07/26 14:43
阅读 1K+
收藏 18
渴切(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
加载中
0
kidbei
kidbei
顶你,虽然看到有人讽刺你,但我觉得渴切很好用,用过bootstrap的各种衍生版本,觉得渴切最适合我。
0
萌龙
萌龙
关键是你真的打算支持ie6吗
tyshymy
tyshymy
一淘网对ie6~ie8低版本浏览器也支持很好 ,ie6~ie8咱现在还抛弃不了,我们只是开发者,我们没有能力决定ie6的市场份额,只能顺应市场来做产品。等ie6份额在国内慢慢变小的时候,就会抛弃对ie6的支持
0
Jayden
Jayden

IE6在国内还有10-15百分比的用户,这是个大群体,大公司的项目都在兼容。除非你的项目有着别人没有的竞争力,否则放弃IE6就是把10%的用户让给你的竞争对手。

兼容IE6的确让几个前端同事受累了,但是10%的用户又是多大价值,相比起来我情愿为这事给大家加工资,也不会放弃IE6。
在这个观点上,我是支持作者的,虽然我没用这些框架


0
我已经报警了
我已经报警了

直接提示用户升级浏览器,就能解决IE6的问题了…给用户一个新的浏览器,用户用起来也顺心,培养用户有个升级浏览器的意识就行了。

http://www.theie6countdown.cn/join-us.aspx

微软官方提供的网站和解决方案

返回顶部
顶部