移动端自适应处理--页面排版js方法

1.使用rem，根据屏幕宽度设置html font-size---tips:The in operator

(function(doc,win){
  var docEl=doc.documentElement,
  //此设置考虑到了手机横屏的问题
  // The in operator returns true if the specified property is in the specified object.
  //syntax: prop in objectName
  resizeEvt='orientationchange' in window?'orientationchange':'resize',
  recalc=function(){
    var clientWidth=docEl.clientWidth;
    if(!clientWidth)return;
    //此设置是根据psd为640宽度下设置1rem=10px来设置的
    docEl.style.fontSize=10*(clientWidth/640)+'px';
  };
  if(!doc.addEventListener) return;
  win.addEventListener(resizeEvt,recalc,false);
  doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window)

2.不使用rem自定义控制元素缩放

//使用的时候直接在相应的需要自适应的html标签上写入percent="{w:2,h:3}"等
//var  a_layout =new adaptable_layout(psd_width);
//a_layout.init();
//根据屏幕宽度调整后初始化的方法
//$(window).resize(a_layout.init());
var adaptable_layout=function(psd_width){
    var rate;
    var self=this;
    this.init=function(){       
        var win_w=document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;
        rate=win_w/psd_width;
        win_w=win_w<=320?320:$(window).width();
        $('[percent]').filter('[percent!=""]').each(function(index){
        self.adapt($(this),$(this).attr('percent'));
        });
    }
    //自适应方法
    this.adapt=function(obj,str){
        var b=rate;
        var objAttr = eval('('+str+')');    
        if(objAttr.w){
            obj.css({"width":objAttr.w*b+"px"});
        }
        if(objAttr.h){
            obj.css({"height":objAttr.h*b+"px"});
        }
        if(objAttr.f){
            obj.css({"font-size":objAttr.f*b+"px"});
        }
        if(objAttr.blw){
            obj.css({"border-left-width":objAttr.blw*b+"px"});
        }
        if(objAttr.brw){
            obj.css({"border-right-width":objAttr.brw*b+"px"});
        }
        if(objAttr.btw){
            obj.css({"border-top-width":objAttr.btw*b+"px"});
        }
        if(objAttr.bbw){
            obj.css({"border-bottom-width":objAttr.bbw*b+"px"});
        }
        if(objAttr.t){
            obj.css({"top":objAttr.t*b+"px"});
        }
        if(objAttr.l){
            obj.css({"left":objAttr.l*b+"px"});
        }
        if(objAttr.r){
            obj.css({"right":objAttr.r*b+"px"});
        }
        if(objAttr.b){
        obj.css({"bottom":objAttr.b*b+"px"});
        }
        if(objAttr.mt){
            obj.css({"margin-top":objAttr.mt*b+"px"});
        }
        if(objAttr.ml){
        obj.css({"margin-left":objAttr.ml*b+"px"}); 
        }
        if(objAttr.mb){
            obj.css({"margin-bottom":objAttr.mb*b+"px"});
        }
        if(objAttr.mr){
            obj.css({"margin-right":objAttr.mr*b+"px"});
        }
        if(objAttr.pt){
            obj.css({"padding-top":objAttr.pt*b+"px"});
        }
        if(objAttr.pl){
            obj.css({"padding-left":objAttr.pl*b+"px"});
        }
        if(objAttr.pb){
            obj.css({"padding-bottom":objAttr.pb*b+"px"});
        }
        if(objAttr.pr){
            obj.css({"padding-right":objAttr.pr*b+"px"});
        }   
        if(objAttr.bt){
            obj.css({"border-bottom":objAttr.bt*b+"px"});
            }
    }
}

3.不使用rem,页面元素中不设置属性，直接按照psd规划界面

document.getElementById('viewport').setAttribute( 'content', 'user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1');
$("html").css("transform","scale("+$(window).width()/640+")");