vue3+ts 使用postcss-pxtorem依赖进行rem适配

amfe-flexible：负责"设定基准"。它会自动给页面的根元素（）设置一个动态的font-size，确保1rem在不同屏幕上的实际显示比例是合适的。

postcss-pxtorem：负责"转换单位"。它会在你打包代码时，自动将你在开发时写的px单位转换成rem单位。

autoprefixer：负责"添加前缀"。它会根据目标浏览器的兼容性要求，自动为CSS属性添加浏览器厂商的前缀（如-webkit-）。

px转换rem

安装依赖

bash 复制代码

npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev

在src\main.ts中导入依赖

ts 复制代码

import "amfe-flexible/index.js";

在vite.config.ts配置

ts 复制代码

import autoprefixer from "autoprefixer"
import pxtorem from "postcss-pxtorem"

export default () => {
	return {
		css: {
            postcss: {
                plugins: [
                    autoprefixer({
                        grid: true // 是否为 Grid 布局添加 IE 前缀
                    }),
                    pxtorem({
                        rootValue: 192,  // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
                        propList: ["*"], // 所有属性都转换
                        selectorBlackList: [".el-"] // 忽略node_modules目录
                    })
                ]
            },
        },
	}
}

重启项目（就能看到px转成rem了）

postcss-pxtorem的配置（有需要就看，没需要就看略过）

配置参数详解

参数	类型	默认值	必填	说明
rootValue	Number	16	是	根元素(html)的字体大小。转换公式：rem = px / rootValue。设计稿宽度为750px时，常设为75
propList	Array	['font', 'font-size', 'line-height', 'letter-spacing']	否	需要转换的CSS属性。设为['*']可转换所有属性
selectorBlackList	Array	[]	否	需要忽略的选择器，保留其px单位。可传字符串（匹配选择器名）或正则表达式
replace	Boolean	true	否	是否直接替换规则中的px为rem。若为false，会保留原px作为后备
mediaQuery	Boolean	false	否	是否允许在@media查询中也进行px到rem的转换
minPixelValue	Number	0	否	设置最小转换值。小于此数值的px单位不会被转换
exclude	String, RegExp, Function	/node_modules/i	否	用于排除某些文件夹或文件，不进行转换
unitPrecision	Number	5	否	转换后rem值的小数点后保留位数

如何忽略单个属性或选择器？

css 复制代码

/* 使用大写 PX：将不需要转换的 px 写成 PX、Px 或 pX。浏览器能正常识别，但插件会自动忽略 */
/* 示例：让 border 不被转换 */
.box {
  border: 1Px solid #ccc; /* 插件会忽略此行 */
  font-size: 16px;        /* 此行正常转换为 rem */
}