vue PC端分辨率适配问题处理 postcss-plugin-px2rem + amfe-flexible （ postcss-pxtorem 或 postcss-px2rem）

vue PC端分辨率适配问题处理 postcss-plugin-px2rem + amfe-flexible （ postcss-pxtorem 或 postcss-px2rem）_不想学习只想玩的博客-CSDN博客

postcss-plugin-px2rem 或 postcss-pxtorem 或 postcss-px2rem + amfe-flexible 实现分辨率适配

npm i postcss-plugin-px2rem  --save -dev
或
npm i postcss-pxtorem  --save -dev
或
npm i postcss-px2rem --save -dev

第一步：安装 amfe-flexible 和 postcss-plugin-px2rem （postcss-pxtorem 或 postcss-px2rem）

npm install amfe-flexible --save

npm i postcss-plugin-px2rem  --save -dev
或
npm i postcss-pxtorem  --save -dev
或
npm i postcss-px2rem --save -dev

amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

第二步：main.js中引入

import 'amfe-flexible'

第三步：vue.config.js中配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
 
 // 其他配置项
  css: {
    extract: false, // 开启 CSS source maps?
    sourceMap: false, // css预设器配置项
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-plugin-px2rem')({  // 按照自己安装的来（postcss-pxtorem 或 postcss-px2rem）
              rootValue: 192, //设计图宽度/10
              unitPrecision: 5, //允许REM单位增长到的十进制数字。
              propList: ['*'],
              //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
              // propBlackList: [], //黑名单
              exclude: false,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
              selectorBlackList: [], //要忽略并保留为px的选择器
              ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
              replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
              mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
              minPixelValue: 0 //设置要替换的最小像素值(3px会被转rem)。 默认 0
            }),
          ]
        }
       
      }
    }
  },
})

如上图所示，px转为rem成功。