vue - cli3.x - 使用 postcss-px2rem 自动将 css 的px单位转换为 rem 单位 - postcss.config.js 配置...

最新推荐文章于 2024-06-27 15:05:32 发布

weixin_34146805

最新推荐文章于 2024-06-27 15:05:32 发布

阅读量939

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5d08a5786fb9a07ea567f0fd

版权

开发移动端的时候，经常需要自己手动去将 px 单位计算成 rem 单位，这很消耗时间。我们可以使用 postcss-px2rem 插件来实现将 px 自动转换为rem，这样就省去的计算的步骤，加快开发速度。

安装：执行 npm i postcss-px2rem --save-dev
配置：postcss.config.js ：如下：

module.exports = {
  plugins: {
    "postcss-px2rem": {
      remUnit: 50, // 50px = 1rem
      remPrecision: 2 // rem的小数点后位数
    }
  }
}
复制代码

设计稿是 750px 的，我这里计算后的根元素是按 50px来算（1rem = 50px），如下：

所以，postcss-px2rem 的配置里，remUnit 填写50。 3.书写：例如 750px 的设计稿里，一个宽度为 750px 的区域应该这样计算：750/2 = 375px。最后填写 375px ，如下：

<template>
  <div class="addressBlock">
    <div>请选择</div>
  </div>
</template>
<style lang="scss" scoped>
  .addressBlock {
    font-size: 16px;/* 在750px设计稿里大小为 32 px */
    width: 375px; /* 在750px设计稿里尺寸为 750 px */
  }
</style>
复制代码

最后得到的结果如下，自动帮我们转换为rem：

转载于:https://juejin.im/post/5d08a5786fb9a07ea567f0fd