Vue3 + Vite 中大屏自适应解决方案插件px转rem记录

安装依赖 pnpm i amfe-flexible autoprefixer postcss postcss-loader postcss-pxtorem 在根目录中创建文件postcss.config.cjs

module.exports = {
	plugins: {
		'postcss-pxtorem': {
			rootValue: 192, // 设计稿宽度除以 10，  开头大写的Px 不转换 => height: 100Px, 内联样式不转换，需要 / 75 转成 rem
			unitPrecision: 2, // 计算结果保留 6 位小数
			selectorBlackList: ['.no-rem', 'no-rem'], // 要忽略的选择器并保留为px。
			propList: ['*'], // 可以从px更改为rem的属性  感叹号开头的不转换
			replace: true, // 转换成 rem 以后，不保留原来的 px 单位属性
			mediaQuery: true, // 允许在媒体查询中转换px。
			minPixelValue: 2 // 设置要替换的最小像素值。
			// exclude: /node_modules/i // 排除 node_modules 文件(node_modules 内文件禁止转换)
		}
	}
}