解读一淘网（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的响应式支持。并且无需要任何第三方插件