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

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

1. 安装：执行 npm i postcss-px2rem --save-dev
2. 配置：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：