用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 ();});