postcss-px-to-viewport 不生效主因是 Vite 4+ 中 vite.config.ts 的 css.postcss.plugins 会覆盖 postcss.config.js；viewportWidth 应匹配设计稿宽度（如 Figma 375px）；字体模糊可设 fontViewportUnit: 'rem'；1px 边框需用 selectorBlackList 排除并配合 CSS 处理。
postcss-px-to-viewport 配置后不生效？检查 vite.config.ts 是否覆盖了 postcss.config.js
Vite 从 4.0 开始默认内联 PostCSS 配置，vite.config.ts 中的 css.postcss.plugins 会完全替代 postcss.config.js，而不是合并。如果你只改了 postcss.config.js 却没动 vite 配置，插件根本不会运行。
正确做法是二选一：
- 删掉
postcss.config.js，把配置写进vite.config.ts的css.postcss.plugins数组里（推荐） - 保留
postcss.config.js，但确保vite.config.ts中未声明css.postcss.plugins字段
常见错误：同时存在两个配置，且 vite.config.ts 里写了空数组 plugins: [] —— 这会清空所有插件，postcss-px-to-viewport 直接被忽略。
viewportWidth 设为 375，但大屏设备上元素太小？确认设计稿基准是否匹配
viewportWidth 不是你当前设备的宽度，而是设计师给你的原始设计稿宽度（比如 Figma 画布设为 375px 宽，就填 375；若为 750px，就得填 750）。填错会导致换算比例翻倍或减半。
立即学习“前端免费学习笔记（深入）”；
例如：
- 设计稿是
750px宽，你误配成375→ 构建后100px变成13.33vw（本该是6.67vw），页面整体放大一倍 - 设计稿是
375px，你配成1920→100px变成1.95vw，几乎不可见
建议在 postcss.config.js 或 vite 配置里加注释，如：// viewportWidth: 375 ← 对应 Figma 375px 设计稿，避免后续协作时误调。
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
字体大小转成 vw 后模糊？用 fontViewportUnit 单独控制字体单位
font-size 对缩放敏感，直接转 vw 在小屏上可能变成 0.833333vw，渲染精度不足导致发虚。插件提供 fontViewportUnit 参数，可让字体走 rem 或保持 px，而其他属性仍用 vw。
典型配置：
'postcss-px-to-viewport': {
viewportWidth: 375,
viewportUnit: 'vw',
fontViewportUnit: 'rem', // 字体用 rem，其他用 vw
rootValue: 37.5, // 与 fontViewportUnit='rem' 配合：1rem = 37.5px → 100px = 2.666rem
propList: ['*'],
selectorBlackList: ['.no-viewport']
}
这样既保字体清晰，又维持布局弹性。注意：启用 fontViewportUnit: 'rem' 时，必须同步在 JS 或 CSS 中设置 html { font-size: ... }，否则 rem 无意义。
1px 边框变粗或消失？用 minPixelValue 和 selectorBlackList 排除关键像素
minPixelValue: 1 是安全底线，但某些场景下你希望 1px 边框始终是物理像素（比如 iOS 上的 hairline）。这时不能靠插件转换，得手动干预：
- 给需要保留
1px的类加前缀，如.border-1px - 在插件配置中加入
selectorBlackList: ['.border-1px'] - 再用媒体查询 +
transform: scaleY(0.5)模拟真正1px
另外，mediaQuery: true 要慎开——它会让 @media (max-width: 768px) { .box { width: 200px; } } 里的 200px 也转成 vw，但媒体查询本身已基于视口，双重缩放容易失控。除非明确需要，否则保持 false。
最易被忽略的一点：插件只处理构建时的 CSS，对 runtime 动态插入的 style 标签、style 属性、CSS-in-JS 完全无效。如果项目里混用了这些，得额外用 JS 计算或统一收口到 class 系统里。
