移动端使用rem布局

首先先设置html的fontsize

使用js

function risizerem(){
   html = document.documentElement;  
   hw = html.getBoundingClientRect().width;
   html.style.fontSize = hw/16+'px';    //设置html字体大小为  设备的宽度/16(这个根据大家的喜好自己随意设置)
}
risizerem()
然后在less中设置
//定义   
@rem:750/16rem;   //设计图宽度750;16为屏幕分成16rem;750/16就是在这张设计图上的html的fonttsize的数值;
//例如  750设计图上  一个图片的宽度为180px;
img{width:180/@rem;}   //这里就是180除以less刚才定义的变量@rem  得出的结果就是  rem;这个rem就是等比例的;

如果大家实在是不理解 ,直接拿着用就行了。js放在head中 ,不要onload, 因为读取到js的时候已经加载了html的dom;less也直接套进去用就可以了;
如果大家感觉好 请赞赏下! _

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容