在 Vue 3 的工程化开发中，CSS 兼容性处理和移动端适配是绕不开的两个问题。手工给每一处 CSS 规则添加浏览器私有前缀不仅繁琐，而且容易随着代码膨胀出现遗漏；在移动端布局时，把设计稿中的 px 固定数值转换成 rem 弹性单位，也需要一套可维护的方案。PostCSS 提供了一套基于 JavaScript 的 CSS 处理机制，它本身只做 AST 解析和转换，真正的处理能力由各类插件提供。在 Vue 3 常见构建工具（Vite 或 Vue CLI）里，只要正确编写 PostCSS 配置文件，就能在保存代码时自动完成前缀补齐与 px 到 rem 的换算。
PostCSS 在 Vue 3 构建链中的工作原理
PostCSS 并不是一个可以直接拿来用的样式处理器，而是一条管道。它读取 CSS 源码，将其解析为抽象语法树，然后依次交给配置中的插件处理，最后序列化回 CSS 字符串。在 Vue 3 项目中，无论是 Vite 还是 Vue CLI，底层都会读取项目根目录下的 postcss.config.js 或 postcss.config.cjs 文件，把其中的插件数组注入到样式编译流程中。当单文件组件中的 <style> 块被编译时，这些内容也会经过同一个 PostCSS 实例处理。
理解这一点很重要：Vue 3 的 <style> 标签里的代码和独立的 .css 文件走的是同一套 PostCSS 配置。很多开发者误以为需要在 Vue 内部单独设置，其实只要在根配置中声明插件，所有样式都会生效。同时，由于 PostCSS 运行在 Node 环境，它不会感知浏览器运行时，所谓“自动添加前缀”完全依赖插件读取 .browserslistrc 或 package.json 中的 browserslist 字段来决定要兼容哪些浏览器。
以 Vite 为例，其内部已经集成了 PostCSS，我们只需导出配置对象即可。下面是一段最基础的配置文件示例，它引入了两个核心插件，后续小节会展开说明参数。
// postcss.config.js
module.exports = {
plugins: {
// 根据目标浏览器自动加前缀
'postcss-preset-env': {
browsers: 'last 2 versions',
autoprefixer: { grid: true }
},
// px 转 rem
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
selectorBlackList: ['.no-rem']
}
}
};
用 postcss-preset-env 自动补齐浏览器前缀
postcss-preset-env 是一个聚合型插件，它内部包含了 Autoprefixer 的同类能力，并且支持 CSS 未来语法降级。当我们设置 browsers 参数后，插件会查询 Can I Use 数据库，对需要兼容的属性自动插入 -webkit-、-ms- 等前缀。例如书写 display: flex 时，在需要兼容旧版 WebKit 的场景下，会输出 display: -webkit-box 等兼容写法。这种处理是静态的，不依赖运行环境，因此能大幅降低手工维护成本。
在实际 Vue 3 项目中，推荐把浏览器范围统一写在 .browserslistrc 文件里，而不是分散在多个插件配置中。这样 postcss-preset-env、Babel 等工具都能读取同一份目标。一个典型的移动端配置如下：
# .browserslistrc iOS >= 10 Android >= 5 last 2 versions
如果项目中引入了第三方 UI 库（如 Element Plus），这些库自身的样式一般已经带好前缀，再次处理可能出现重复规则。此时可通过 exclude 配置忽略 node_modules 中的文件，或者在插件参数中缩小作用范围。需要强调的是，前缀处理应当优先保证功能正确，不要为了精简而去掉对 transform、flex 等关键属性的兼容。
通过 postcss-pxtorem 完成 px 到 rem 的转换
移动端适配的核心思路是：设计稿宽度固定（如 375px），我们按 37.5 的基准把 px 除以 37.5 得到 rem，然后在页面中动态设置 html 的 font-size 为视口宽度的十分之一。这样无论屏幕大小，布局都能等比缩放。postcss-pxtorem 的作用就是在编译阶段把样式里的 14px 之类数值自动换成 0.37333rem，避免手工计算。
配置中 rootValue 是最关键的参数。如果你的设计稿宽是 750px 且采用 1:1 标注，通常设 rootValue: 75；若设计稿是 375px 标准，设 37.5 即可。 propList 控制哪些属性参与转换，['*'] 表示全部，也可以写 ['font', 'width', 'height'] 做白名单。 selectorBlackList 用于排除特定选择器，比如第三方组件或不想转换的类名。
下面展示一个配合 Vue 3 入口文件动态设置根字体的例子，这样才能让 rem 真正生效：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
function setRem() {
const width = document.documentElement.clientWidth;
// 以 375 设计稿、rootValue 37.5 为例
document.documentElement.style.fontSize = width / 10 + 'px';
}
setRem();
window.addEventListener('resize', setRem);
使用 postcss-pxtorem 时常见的坑是：行内样式（写在 style 属性里的 px）不会被 PostCSS 处理，因为 PostCSS 只管 CSS 文件或 <style> 块；此外，1px 边框如果也被转成 rem，在部分高分屏会消失，可以通过 minPixelValue: 2 参数跳过 1px 转换。对于需要固定像素的场景，用 selectorBlackList 或在值后写 PX 大写单位（插件默认忽略大写 PX）即可保留原值。
在 Vite 与 Vue CLI 中的差异和注意事项
Vue 3 官方脚手架创建的项目多基于 Vite，而老项目可能用 Vue CLI。两者都支持 PostCSS，但 Vite 默认不生成 postcss.config.js，你需要手动新建；Vue CLI 则在 vue.config.js 的 css.postcss 中可配，也可以共用独立配置文件。无论哪种，插件名都要写对，Node 模块解析对大小写敏感，postcss-pxtorem 不能写成 postcss-px-to-rem 以外的错误包名。
另一个重点是构建顺序。PostCSS 在 Vite 中处于 CSS 编译的中间环节，如果你用了 Sass，那么 Sass 先编译出 CSS，再交给 PostCSS。这意味着你在 Sass 里写的 px 同样会被转 rem，但 Sass 变量如果是字符串拼接生成的值，需保证最终输出是标准 px 数值，否则插件无法识别。遇到转换失效时，可临时在插件里加 console.log 或用 postcss-reporter 查看处理结果。
最后提醒，PostCSS 配置改动后需要重启开发服务器才能完全生效，因为配置文件在启动时被读取缓存。当团队多人协作时，建议把 .browserslistrc 和 postcss.config.js 都提交到版本库，避免不同机器上前缀和 rem 基准不一致，导致测试与线上样式错位。只要理清构建链路并写好参数，Vue 3 中的自动化样式处理就能长期稳定服务于业务开发。