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

Posted 2021-01-15 ecalf

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