移动端页面——js控制制作

移动端一般设计图尺寸为720px或者640px，一般来说使用rem（指相对于根元素（即html元素）的字体大小的单位）。

可以使用js来控制，方便快速做出移动页面适应大部分手机的移动页面

 

例如设计图为640px时，

function  defaultfont(){

    var iphoneWeight = $(window).width()>640？640：$(window).width();                       //获取设备宽度，当设备宽度大于640时，取640，否则取设备宽度

    var tuWeight = 640;

    var fontSize = 100*iphoneWeight/tuWeight;                                                            

   $("html").css("font-size",fontSize+"px");                                                                  //设置页面字体大小

}

   setTimeout(function(){

       defaultfont();

    }, 100);                                                                                                      //延时执行防止宽度加载有误差

结果 1rem = 100px  ;制作页面时，就可以直接量px，然后除以100()，单位换成rem就行了

例如

宽度设计图上为100px,在写css时:  width:"1rem";

 

特别要注意的是，这个js要引入在head部分，放在jquery引入之后，其他js引入之前；