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

http://www.jiangweishan.com/article/lowIeResposive.html

响应式布局，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端响应式，代码要比上面说的方法简洁，暂采用吧，这里我想分享下：

1. $(window).resize(function () {
2.     screenRespond();
3. });
4. screenRespond();
5. function screenRespond(){
6.   var screenWidth = $(window).width(); 
7.   if(screenWidth <= 1800){
8.     $("body").attr("class","w1800");
9.   }
10.   if(screenWidth <= 1400){
11.     $("body").attr("class","w1400");
12.   }
13.   if(screenWidth > 1800){
14.     $("body").attr("class","");
15.   }
16. }

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

1. /* response */
2. .w1800 .screen-wid{width:1200px}
3. .w1800 .p-top-lin,.w1400 .p-top-lin{border:solid #e5e5e5;border-1px 0 0}
4. .w1800 .dchart-conut{width:100px}
5. .w1800 .dchart-conut p{padding:8% 0}
6. .w1400 .screen-wid{width:960px}
7. .w1400 .header_fixed .menu-navbox{margin-left:8%}
8. .w1400 .header_fixed .menu-navbox li{padding:17px 1.2%}
9. .w1400 .header_fixed .menu-slide-down li{padding:0}
10. .w1400 .menu-navbox{margin-left:25%}
11. .w1400 .menu-navbox li{padding:17px 2%}
12. .w1400 .menu-navbox .none-mar{padding-right:0}
13. .w1400 .menu-slide-down li{padding:0}
14. .w1400 .menu-navbox a{font-size:15px}

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