vue3屏幕适配

通过两个插件来实现  postcss-pxtorem 和   amfe-flexible

 在main.js 中 导入

import "amfe-flexible";

在vite.config.js中配置

  css: {
    postcss: {
      plugins: [
        postcssPxtoRem({
          rootValue: 192, // 根据使用的ui组件？ 定义根元素大小？
          unitPrecision: 5,
          propList: ['*', "!border"], //可以从px更改为rem的属性
          selectorBlackList: ['.norem', "ignore"], // 过滤掉.norem-开头的class，不进行rem转换
          // minPixelValue: 12, ///设置要替换的最小像素值，px小于12的不会被转换
          minPixelValue: 1, // 设置要替换的最小像素值
          // exclude: ["node_modules"], //转换的时候排除
          replace: true,
          mediaQuery: false,

        })
      ]
    }
  }