一種簡單的 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.