探讨兼容IE低版本的PC端响应式布局

响应式布局，oh my god！！有点醉了，感觉是老生常谈的话题了。虽然已经谈过很多了，但这次也很有必要拿出来探讨下。为什么呢？往下看呗。。。

最近在折腾公司首页的改版，设计师设计了三个版本，宽度分别为1600px，1200px，960px。看到这三个尺寸的设计，很明显需要做PC端的响应式，我们都知道针对IE9+和其他高富帅浏览器的响应式，使用Media Query轻松搞定。至于IE8以下的，平常项目中都是设置一个最小宽度，屏幕缩小的时候状态栏出现滚动条。现实并不是我们想象的那么简单，我们需要默认显示1600px的宽度，那么在IE8以下的这种方法不太合适了，因为屏幕太宽。

于是打开谷歌、百度，疯狂搜索，逛了一圈。给我的总结：都是围绕2个处理方法，就是要用到第三方插件库：

第一种：https://github.com/livingston/css3-mediaqueries-js

第二种：https://github.com/scottjehl/Respond

具体方法我们可以打开连接查看相关应用方法，这里就不啰嗦了。使用过后的感觉：代码太臃肿了，效果也一般，在IE7/8容易出现闪屏情况等等，乱七八糟问题，暂且放弃。

心有不甘，继续seaching，最后发现淘宝和天猫的新版首页也用到了PC端响应式，进行了一番研究，他们用的是取屏幕宽度，然后通过resize方法来实现PC端响应式，代码要比上面说的方法简洁，暂采用吧，这里我想分享下：

上面是我在项目中使用的方法，虽然跟淘宝天猫有些不同，但是大同小异，核心一样。定义一个函数，然后执行，最后屏幕变化的时候resize，根绝不同尺寸，我们给body新增一个class，用这个父级class控制相应尺寸内容响应式，看下我从项目中截取的CSS代码

一个庞大的首页响应式【兼容ie7/8】，用这样的代码轻松搞定。考虑诸多方面的因素，我认为这是最好的方法。

清晰的框架结构、灵活的扩展，是我们实现响应式的必备基础；一个好的结构布局可以大大减少代码的数量，比如用百分比布局等等。

看到这里，你是否已经掌握了呢？

如果你有好的方法和疑问，请留言。

bcoder编程网

#lowIeResposive.html”>bcoder编程网/lowIeResposive.html