vue3/vue2-在pc端/移动端使用rem自适应布局（适配Element-ui/plus、Ant Design）

1. 安装依赖

1-需要负责自动根据设备大小修改根节点font-size的插件（免去手动配置转换插件）

2-需要一个在编译使用，自动将代码px转换为rem的插件（免去手动转rem）

npm install amfe-flexible // CSS单位自适应转换插件 负责更改根font-size
npm install postcss-pxtorem@^5.1.1 // 如果版本过高可以降版本下载5.1.1版本 负责将px转成rem

2. 引入amfe-flexible

在main.js中引入amfe-flexible

import "amfe-flexible"

3. 配置vite.config.js

postCssPxToRem里面的对象属性可以自己根据需求来配置

import postCssPxToRem from 'postcss-pxtorem'

export default defineConfig(({ mode }) => {
  return {
    css: {
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: [
              'Android 4.1',
              'iOS 7.1',
              'Chrome > 31',
              'ff > 31',
              'ie >= 8'
            ]
          }),
          postCssPxToRem({
            // 自适应，px>rem转换
            rootValue: 192, // 75表示750设计稿，37.5表示375设计稿
            propList: ['*'] // 需要转换的属性，这里选择全部都进行转换
            // selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
            // unitPrecision: 5, //允许rem单位增长的十进制数字
            // replace: true, //替换包含rems的规则，而不添加后备
            // mediaQuery: false, //允许在媒体查询中转换px
            // minPixelValue: 0, //设置要替换的最小像素值
            // selectorBlackList: [], //忽略转换正则匹配项
            // exclude: /node_modules/i //要忽略并保留为px的文件路径
          })
        ]
      }
    }
  }
})

4、运行项目，在浏览器控制台F12可以发现，元素节点px已更改为rem

PS：在部分第三方UI框架中，可能需要通过手动样式穿透方式来二次修改框架自定义的元素样式