vue移動端適配（px轉vw）postcss-px-to-viewport配置

安裝postcss-px-to-viewport

npm install postcss-px-to-viewport

根目錄新建postcss.config.js文件

//postcss.config.js文件
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', //需要轉換的單位，默認為"px"
      viewportWidth: 375, // 視窗的寬度，對應的是我們設計稿的寬度
      viewportHeight: 1334,//視窗的高度，根據375設備的寬度來指定，一般指定667，也可以不配置
      unitPrecision: 13, // 指定`px`轉換為視窗單位值的小數位數（很多時候無法整除）
      propList: ['*'], // 能轉化為vw的屬性列表
      viewportUnit: 'vw', // 指定需要轉換成的視窗單位，建議使用vw
      fontViewportUnit: 'vw', //字體使用的視口單位
      selectorBlackList: ['.ignore-', '.hairlines'], //指定不轉換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
      minPixelValue: 1, // 小於或等於`1px`不轉換為視窗單位，你也可以設置為你想要的值
      mediaQuery: false, // 允許在媒體查詢中轉換`px`
      replace: true, //是否直接更換屬性值，而不添加備用屬性
      exclude: [
        /RightBar/,
        /gotop.vue/,
      ], //忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
      landscape: false, //是否添加根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
      landscapeUnit: 'vw', //橫屏時使用的單位
      landscapeWidth: 1134 //橫屏時使用的視口寬度
    }
  }
}