<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
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+")");