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

时间:2023-03-09 06:16:07
一种简单的 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.