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：