用jq设置web端浏览器自适应效果（兼容IE7以上）

1、定义判断浏览器的变量：

var isFirefox = navigator.userAgent.indexOf("Firefox")>0   //判断火狐
     ,isIE8     = navigator.userAgent.indexOf("MSIE 8.0")>0  //判断IE8
     ,isChrome     = navigator.userAgent.indexOf("Chrome")>0  //判断谷歌
     ,jrIE      = document.documentMode                      //判断IE兼容版本
    ;

2、定义缩放名的变量：

var zoom = 'zoom';
  if(isFirefox){
    zoom = 'transform';
  }

3、定义缩放参数的函数：

function zoomVal(val){
  if(isFirefox){
       return 'scale('+ val +')';
   }else{
       return val;
   }
 }

4、自定义一个函数执行浏览器的自适应：

function adaptive (){
  //定义需要自适应的元素变量
  var body_w = document.body.clientWidth
     ,focus = $('.class .class_bannerBox ')
     ,box   = [$('.class ')
               ,$('.class .class_box')
              ]
      ;

   //定义一个boxZoom函数，执行需要缩放的box盒子元素
   function boxZoom(value){
      for(var i=0,len=box.length;i<len;i++){
        box[i].css(zoom,zoomVal(value));
      }
    }

    //执行banner 图自适应,banner图是用绝对定位absolute,所以需要重新设置属性
    if(body_w <= 1366){
      focus.height('value').children().css({'height':'value','margin-left':'-value'});
    }else{
      focus.height('value').children().css({'height':'value','margin-left':'-value'});
    }

    //box盒子执行自适应缩放,具体的内容可以具体定义
    if(body_w > 1366) {
        boxZoom(1);
    } else {
        boxZoom(0.802);
        if(jrIE <= 11) {
           $('.class_box').css({'margin-top':'value'});
           ...
        }
    }

  }

  adaptive();
  //拉伸浏览器时触发
  $(window).resize(function(){adaptive ();});