rem的单位换算

最新推荐文章于 2024-07-18 15:48:23 发布

秃头大学生破晓

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量42

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_43748856/article/details/130188585

版权

手动计算

  <style>
    body {
      font-size: (16 / 37.5)rem;
    }

    #box {
      width: (25 / 37.5)rem;
      height: (25 / 37.5)5rem;
      /*设计图的尺寸px / html的fontsize rem*/
      background-color: antiquewhite;
    }
  </style>

less辅助计算

.pxToRem(@px) { //css混入
  result: 1rem * (@px / 37.5); // 37.5这个值跟设计稿有关
}
.box {
  width: .pxToRem(100)[result]; // [result]拿到值
  height: .pxToRem(100)[result];
  background-color: bisque;
}

p {
  font-size: .pxToRem(14)[result];
}

pstcss-pxtorem（需要webpack配置）