探讨兼容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端响应式，代码要比上面说的方法简洁，暂采用吧，这里我想分享下：
- $(window).resize(function () {
- screenRespond();
- });
- screenRespond();
- function screenRespond(){
- var screenWidth = $(window).width();
- if(screenWidth <= 1800){
- $("body").attr("class","w1800");
- }
- if(screenWidth <= 1400){
- $("body").attr("class","w1400");
- }
- if(screenWidth > 1800){
- $("body").attr("class","");
- }
- }
上面是我在项目中使用的方法，虽然跟淘宝天猫有些不同，但是大同小异，核心一样。定义一个函数，然后执行，最后屏幕变化的时候resize，根绝不同尺寸，我们给body新增一个class，用这个父级class控制相应尺寸内容响应式，看下我从项目中截取的CSS代码
- /* response */
- .w1800 .screen-wid{width:1200px}
- .w1800 .p-top-lin,.w1400 .p-top-lin{border:solid #e5e5e5;border-width:1px 0 0}
- .w1800 .dchart-conut{width:100px}
- .w1800 .dchart-conut p{padding:8% 0}
- .w1400 .screen-wid{width:960px}
- .w1400 .header_fixed .menu-navbox{margin-left:8%}
- .w1400 .header_fixed .menu-navbox li{padding:17px 1.2%}
- .w1400 .header_fixed .menu-slide-down li{padding:0}
- .w1400 .menu-navbox{margin-left:25%}
- .w1400 .menu-navbox li{padding:17px 2%}
- .w1400 .menu-navbox .none-mar{padding-right:0}
- .w1400 .menu-slide-down li{padding:0}
- .w1400 .menu-navbox a{font-size:15px}
一个庞大的首页响应式【兼容ie7/8】，用这样的代码轻松搞定。考虑诸多方面的因素，我认为这是最好的方法
