不能同时用 postcss-pxtorem 和 postcss-px-to-viewport，因二者原理冲突：前者转 px 为 rem 并依赖 js 动态设置根字号，后者转 px 为 vw/vmax 且完全不依赖 js；混用会导致同一 px 值被重复转换、样式冲突、构建产物冗余，nuxt3 中执行顺序不可控，调试困难。
PostCSS 本身不实现自适应，它只是管道；真正起作用的是插件，而你在 Nuxt3 中必须明确选 postcss-pxtorem 还是 postcss-px-to-viewport —— 二者原理、配置、JS 配合方式完全不同，混用必出错。
为什么不能同时用 postcss-pxtorem 和 postcss-px-to-viewport
它们底层逻辑冲突：postcss-pxtorem 把 px 换成 rem，依赖 JS 动态改 document.documentElement.style.fontSize；postcss-px-to-viewport 把 px 换成 vw/vmax，完全不依赖 JS，靠浏览器原生视口计算。如果你在同一个项目里同时启用两者：
- 同一行 CSS（如
width: 375px）会被转两次：先变5vw，再被误当成 px 又转成0.0667rem，结果完全不可控 - Nuxt3 的 PostCSS 插件执行顺序不可控，
replace: true下谁后跑谁生效，调试时样式忽大忽小 - 构建产物中出现
width: 5vw; width: 0.0667rem这类冗余且冲突的声明，浏览器按后者渲染，但你根本不知道哪条胜出
选 postcss-px-to-viewport：零 JS、纯 CSS、适合 Nuxt3 SSR
这是 Nuxt3 官方推荐路径，尤其适合需要服务端渲染（SSR）或静态生成（SSG）的项目，因为所有转换都在构建时完成，无需客户端 JS 干预。
-
viewportWidth必须设为设计稿宽度（如375或750），不是设备宽度，也不是clientWidth -
propList别盲目写['*']：字体慎转（font-size: 14px→3.73333vw在大屏上会过大），建议显式列出：['width', 'height', 'padding', 'margin', 'top', 'left'] -
minPixelValue: 2是底线：避免border: 1px被转成0.26667vw，小屏下直接消失 -
mediaQuery: false（默认值）—— 不要开，开了之后@media (max-width: 768px)会变成@media (max-width: 20.48vw)，断点彻底失效 -
exclude至少排除/node_modules/和 UI 库路径（如/ant-design-vue/），否则第三方组件样式被强转，布局崩坏
选 postcss-pxtorem：需 JS 配合，rootValue 必须与 JS 设置的 font-size 完全一致
如果你已用 flexible.js 或自写 JS 控制根字号，那只能选这个，但必须死守一条铁律：rootValue 必须等于 JS 中最终设置的 html 字体大小数值（单位是 px）。
- 常见错误：JS 写
fontSize = clientWidth / 7.5 + 'px'（对应 750 设计稿），那么rootValue就得是75，不是7.5，也不是37.5 - JS 必须内联在
里执行，不能等 DOMContentLoaded，否则 FOUC 期间 CSS 已按错误 rem 渲染完毕 - 监听
resize和orientationchange时，务必加setTimeout(fn, 100)防抖，否则横屏瞬间频繁重设 font-size，触发 layout thrashing -
selectorBlackList推荐用正则：[/^\.hairline/, /\.ignore-/]，比字符串匹配更精准，避免误伤 -
mediaQuery: false同样是强制项，postcss-pxtorem对媒体查询里的px做 rem 转换毫无意义，反而破坏断点逻辑
Vue 组件内联样式和 CSS-in-JS 怎么办
PostCSS 插件只处理 .css、.scss、.vue 中的 <style></style> 块，对 :style 绑定或 style 属性无效。
- 动态
:style="{ width: widthPx + 'px' }"：必须手动换算，例如widthPx / 75 + 'rem'（假设rootValue === 75） - 使用
useBreakpoints或useMediaQuery做响应式逻辑时，不要依赖 px 值做判断，改用useWindowSize()获取width.value后除以rootValue得 rem 级阈值 - 第三方图标库（如 iconfont）的
font-size若被转 vw/rem，容易失真，建议用selectorBlackList显式排除其类名前缀（如'iconfont'）
最易被忽略的一点：Nuxt3 的 postcss.config.js 配置不会自动继承到 .vue 单文件组件的 <style scoped></style> 块里，必须确认你的 build.postcss.plugins 是在 nuxt.config.ts 中全局注入，而不是只配在 postcss.config.js 文件里——后者在 Nuxt3 中已被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
