手机移动端布局要考虑到适配不同手机屏幕
下面是自己适配的rem.js 其中的750根据设计稿的宽度修正
创建rem.js文件,内容如下
window.onload=function(){
resize(750,"x");
}
function resize(originSize,type){
// originSize = 750;
// type = x
type = type || "x";
if(type=="x"){
var width = document.documentElement.clientWidth;//设备的宽度
var scale = width/originSize*100+"px";
document.getElementsByTagName("html")[0].style.fontSize=scale;
}else if(type=="y"){
var height = document.documentElement.clientHeight;
var scale = height/originSize+"px";
document.getElementsByTagName("html")[0].style.fontSize=scale;
}
}
resize(750,"x");
window.onresize = function(){
resize(750,"x");
}
HTML页面引入
<script src="js/rem.js"></script>
rem.js中的750就是你参考的设计搞的宽度,设计稿为350px宽,750全部改为350即可
然后CSS布局,涉及到像素的单位就直接用rem,100px = 1rem
如一个div宽100px 高200px 直接设置为宽1rem 高2rem ;
就达到了适配不同大小屏幕的效果,快试一试吧