通过两个插件来实现 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, }) ] } }
标签:amfe,适配,px,rem,vue3,minPixelValue,屏幕 From: https://www.cnblogs.com/lxsunny/p/18334911