码迷,mamicode.com
首页 > 其他好文 > 详细

一种简单的 rem 单位基准设置

时间:2018-10-26 13:11:05      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:des   cli   code   design   function   min   math   div   简单   

1rem 换算成的像素值等于 html 元素的 font-size 值

如果 设置 html 的 font-size 为 100px, 那么设计稿的 像素转换成 rem 只需要除以 100 即可。

function setRem(designWidth, maxWidth) {
      var htmlElm = document.documentElement;
      var pageWidth = htmlElm.getBoundingClientRect().width;
      pageWidth = Math.min(pageWidth ,maxWidth || designWidth);
      var rempx = 100*pageWidth/designWidth;
      htmlElm.style.fontSize = rempx+‘px‘;
      document.body.style.fontSize = ‘0.16rem‘; //16px
}


setRem(750,1920) //pc
setRem(750,680) //mobile

 

一种简单的 rem 单位基准设置

标签:des   cli   code   design   function   min   math   div   简单   

原文地址:https://www.cnblogs.com/ecalf/p/9855596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!