PostCSS + postcss-px-to-viewport 在构建时将 px 按规则批量转为 vw，需匹配设计稿宽度（如375）、合理设置 unitPrecision（如3）和 propList（如['font', 'padding']），仅作用于 CSS 文件，不处理内联样式或 JS 动态值，且不可替代运行时方案。
PostCSS + postcss-px-to-viewport 能直接解决
它不是“运行时”转换，而是在构建时把 px 静态替换成 vw（或 vmin），适合移动端适配场景。关键不是“自动”，而是“按规则批量替换”，所以得先定义好设计稿宽度和目标视口单位。
- 必须配合构建工具（如 Vite、Webpack）使用，纯 HTML 引入 CSS 文件无效
- 默认只处理样式表里的
px值，不处理内联style属性或 JS 动态设置的像素值 - 像
border: 1px solid #000这种会被转，但font-size: 16px是否转取决于配置中的propList - 常见错误：没改
viewportWidth，还按 750 设计稿配，结果在 iPhone SE 上字体小到看不见
配置里最常踩坑的三个参数
viewportWidth、unitPrecision、propList 这三个不调对，生成的 vw 值要么失真，要么该转的没转、不该转的乱转。
-
viewportWidth必须和设计稿宽度一致（比如 Figma 画的是 375 宽，这里就得填375，不是设备物理宽度） -
unitPrecision控制小数位数，默认5，但设成3后14px → 3.733vw比3.73333vw更安全，避免某些安卓浏览器渲染抖动 -
propList默认是['*']，会把所有含px的属性都转；如果只想转字号和间距，改成['font*', 'padding*', 'margin*', 'width', 'height']，避免把border或box-shadow也转出奇怪效果
Vite 项目里怎么加（不用改打包配置）
Vite 用户直接装插件就行，不需要碰 vite.config.ts 里的 css.postcss 大段配置，除非你用的是旧版本。
- 运行
npm install postcss-px-to-viewport --save-dev - 在项目根目录加
postcss.config.js，内容写死比插件自动读取更可控：
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
unitPrecision: 3,
propList: ['font*', 'padding*', 'margin*', 'width', 'height']
}
}
}
- 删掉
node_modules和pnpm-lock.yaml（或package-lock.json）再重装，能避开插件版本冲突导致的“配置不生效”问题
为什么不能靠 JS 运行时动态算 vw
有人想用 document.documentElement.clientWidth 实时算比例然后 setStyle，这条路走不通——不是技术做不到，而是代价太高。
立即学习“前端免费学习笔记（深入）”；
- CSSOM 操作触发重排，频繁修改
font-size或padding会让页面卡顿，尤其低端安卓机 - 无法处理伪元素（
::before）、@media查询里的px，也不兼容 CSS 变量里的单位计算 - 和服务端渲染（SSR）冲突：Node 环境没有
window.innerWidth，首屏直出的样式就和客户端不一致 - 真正需要响应式缩放的，比如图表尺寸、Canvas 像素画布，才值得用 JS 算；普通布局和文字，构建时转干净更稳
单位转换看着简单，但 px 转 vw 的本质是「设计约束对齐」，不是数值换算。漏掉设计稿基准、乱配 propList、或者指望运行时兜底，后面调试花的时间远超配置多花的两分钟。
