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

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

 

 

vw 与 rem 混合使用：

如果使用 vw 作为单位，那么 设计稿的 100px 换算 vw 就是  100/(desiginWidth/100) vw ，

设置  html 样式 font-size:100/(desiginWidth/100) vw, 那么设计稿上像素转换成 rem 也是除以 100 即可. 这个方法甚至不需要 js 来动态设置 html 的 font-size.