移动端使用less方式的rem布局

首先在头部需要添加标签

<meta name="viewport" content="width=device-width,initial-sacle=1,user-scalable=no">

然后在script标签中添加下面代码

var htmlWidth=document.documentElement.cilentWidth||document.body.clientWidth;
var html=document.documentElement;//获取htm元素
html.style.fontSize=htmlWidth/10+'px';//设置html的根元素大小

新建.less和.css文件。在.less文件中设置@r:37.5*2rem；相当于1rem=75px;在.less文件中根据设计稿设置各元素的尺寸。例如font-size:28px则.less文件中font-size:28/@r。通过koala将less文件编译为css文件。在.html文件引入css文件即可。