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

amfe-flexible负责设定基准。它会自动给页面的根元素设置一个动态的font-size确保1rem在不同屏幕上的实际显示比例是合适的。postcss-pxtorem负责转换单位。它会在你打包代码时自动将你在开发时写的px单位转换成rem单位。autoprefixer负责添加前缀。它会根据目标浏览器的兼容性要求自动为CSS属性添加浏览器厂商的前缀如-webkit-。px转换rem安装依赖npmi postcss-pxtorem autoprefixer amfe-flexible --save-dev在src\main.ts中导入依赖importamfe-flexible/index.js;在vite.config.ts配置importautoprefixerfromautoprefixerimportpxtoremfrompostcss-pxtoremexportdefault(){return{css:{postcss:{plugins:[autoprefixer({grid:true// 是否为 Grid 布局添加 IE 前缀}),pxtorem({rootValue:192,// 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192propList:[*],// 所有属性都转换selectorBlackList:[.el-]// 忽略node_modules目录})]},},}}重启项目就能看到px转成rem了postcss-pxtorem的配置有需要就看没需要就看略过配置参数详解参数类型默认值必填说明rootValueNumber16是根元素(html)的字体大小。转换公式rem px / rootValue。设计稿宽度为750px时常设为75propListArray[‘font’, ‘font-size’, ‘line-height’, ‘letter-spacing’]否需要转换的CSS属性。设为[‘*’]可转换所有属性selectorBlackListArray[]否需要忽略的选择器保留其px单位。可传字符串匹配选择器名或正则表达式replaceBooleantrue否是否直接替换规则中的px为rem。若为false会保留原px作为后备mediaQueryBooleanfalse否是否允许在media查询中也进行px到rem的转换minPixelValueNumber0否设置最小转换值。小于此数值的px单位不会被转换excludeString, RegExp, Function/node_modules/i否用于排除某些文件夹或文件不进行转换unitPrecisionNumber5否转换后rem值的小数点后保留位数如何忽略单个属性或选择器/* 使用大写 PX将不需要转换的 px 写成 PX、Px 或 pX。浏览器能正常识别但插件会自动忽略 *//* 示例让 border 不被转换 */.box{border:1Px solid #ccc;/* 插件会忽略此行 */font-size:16px;/* 此行正常转换为 rem */}