适配：postcss-px-to-viewport

vue项目结合postcss-px-to-viewport可以达到适配效果

1. 版本问题
   当前项目基本环境（以Vue3.0为看板）

node:v16.14.2
npm:6.14.17

"vue": "3.2.13",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",

2. 安装依赖

npm i postcss@8.4.12  postcss-import@11.0.0  postcss-loader@4.0.4 postcss-px-to-viewport@0.0.3 -D

3. 配置：新建 postcss.config.js 文件

module.exports = {
  plugins: {
    "postcss-import": {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      path: ["./src/*"],
    },
    "postcss-px-to-viewport": {
      viewportWidth: "1920", // 视窗的宽度，对应设计稿的宽度
      viewportHeight: "1080", // 视窗的高度
      unitPrecision: 5, // 指定px转换为视窗单位值的小数位数(因为无法整除)
      viewportUnit: "vw", // 指定需要转换成的视窗单位，使用vw
      selectorBlackList: [], // 指定不转换为视窗单位的类
      minPixelValue: 1, // 小于或等于1px不转换为视窗单位
      mediaQuery: false, // 允许在媒体查询中转换px
      exclude: /(\/|\\)(node_modules)(\/|\\)/, // 不包含node_modules文件
    },
  },
}

这要项目中以px以及第三方库中的px单位全部转换成vw，如果要对哪些类不进行转换就在selectorBlackList填写类名就可以了

注明：行内样式无效，只能手动换算vw