美文网首页前端面试题精选
移动端使用rem布局

移动端使用rem布局

作者: xiaoaiai | 来源:发表于2017-07-28 23:57 被阅读0次
首先先设置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也直接套进去用就可以了;
如果大家感觉好 请赞赏下! _

相关文章

网友评论

    本文标题:移动端使用rem布局

    本文链接:https://www.haomeiwen.com/subject/pgcqlxtx.html