vue3+vite 配置文字自适应

1.安装依赖包

npm install postcss-pxtorem -D
npm install amfe-flexible -D  

2.vite配置

import postCssPxToRem from "postcss-pxtorem";

plugins: [  
css: {
    postcss: {
        plugins: [
          postcssPxtoRem({
            rootValue: 192, // 按照自己的设计稿修改 1920/10
            unitPrecision: 5, // 保留到5位小数
            selectorBlackList: ["ignore", "tab-bar", "tab-bar-item"], // 忽略转换正则匹配项
            propList: ["*"],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0,
          }),
        ],
      },
}
]

3.main.js引入文件

import "amfe-flexible"

4.使用px做单位使用即可

  .title {
      width: 21vw;
      height: 100%;
      color: $primary-font-color;
      font-size: 20px;
    }
    
    注意：如果是`行内样式`或者`js赋值`的px这个插件不会转行rem，这个时候需要在赋值的时候/192
    
    例如：<div :style="{width: 1000 / 192 + 'rem', height: 500 / 192 + 'rem'}"></div>