移动web适配之rem

手机移动端布局要考虑到适配不同手机屏幕

下面是自己适配的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 ；
就达到了适配不同大小屏幕的效果，快试一试吧