lib-flexible 的 font-size 必须与 postcss-pxtorem 的 rootValue 严格一致，否则 rem 计算错位：lib-flexible 运行时设 html font-size（如37.5px），而 postcss-pxtorem 构建时按 rootValue（如75）将 px 转为 rem，若二者不匹配（如37.5 vs 75），则尺寸缩放失准，导致页面元素忽大忽小。
直接用 lib-flexible + postcss-pxtorem 是可行的，但必须严格对齐 rootValue 和设计稿逻辑，否则 rem 计算会错位，页面元素忽大忽小。
为什么 lib-flexible 的 font-size 必须和 postcss-pxtorem 的 rootValue 一致
两者不是独立工作的：lib-flexible 动态设置 html 的 font-size（比如 37.5px），而 postcss-pxtorem 把你写的 375px 编译成 375 / rootValue rem。如果 rootValue 设为 75，但 lib-flexible 实际设的是 37.5px，那 1rem 就等于 37.5px，而插件却按 1rem = 75px 算，结果所有尺寸缩一半。
- 设计稿是 750px → 推荐
rootValue: 75，同时确保 lib-flexible 没被其他脚本覆盖或误配 - 设计稿是 375px 或项目用 Vant → 必须用
rootValue: 37.5，lib-flexible 默认行为刚好匹配（screenWidth / 10） - 若手动改过 lib-flexible 的缩放逻辑（如加了 max-scale 限制），
rootValue也得同步调整，不能只看设计稿宽度
postcss-pxtorem 配置里最容易填错的几个字段
很多人卡在编译后样式没变，或部分组件（如 Vant）错乱，基本都是这几个参数没对上：
-
rootValue：必须是数字，不能写成函数或表达式；Vant 官方要求 37.5，硬改会导致图标、间距全崩 -
propList：设为['*']才能转换所有 px；如果只写['font-size']，那width、padding这些都不会转 -
exclude：一定要加/node_modules/i，否则 Vant 或其他 UI 库的 px 也会被强行转，引发样式冲突 -
mediaQuery：保持false；设为true会把媒体查询里的 px 也转，但 lib-flexible 不管媒体查询，容易导致断点失效
lib-flexible 引入后 meta 标签要不要删
要删，而且必须删干净。lib-flexible 会在运行时注入自己的 <meta name="viewport">，内容类似 width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no。如果你在 index.html 里还留着旧的 viewport 标签，两个标签共存会触发浏览器兼容模式或缩放异常。
立即学习“前端免费学习笔记（深入）”；
- 检查
index.html中是否只剩一个 viewport 标签，且是 lib-flexible 注入的（可打开控制台 Elements 面板确认） - 如果用的是
amfe-flexible（lib-flexible 的维护分支），它不自动注入 meta，此时可以保留手写的 viewport - 某些构建工具（如 vite-plugin-legacy）可能重写 meta，需确认执行顺序，lib-flexible 必须最后生效
Vue3 项目中 postcss.config.js 不生效的常见原因
Vue CLI 项目通常走 vue.config.js 配置，而 Vite 项目默认读 postcss.config.js。但即使文件存在，也可能被忽略：
- Vite 用户：确保安装了
postcss（vite 本身不自带），且版本与postcss-pxtorem兼容（推荐postcss-pxtorem@5.1.1+postcss@8.x） - Vue CLI 用户：别放
postcss.config.js，改用vue.config.js的css.loaderOptions.postcss.plugins数组引入 - 检查 node_modules 中
postcss-pxtorem版本：最新版（v7+）已不支持 PostCSS 8，报错"requires PostCSS 8"时，降级到@5.1.1最稳 - 写个测试 CSS：
.test { width: 375px; }，编译后看输出是否变成width: 10rem，不是就说明插件根本没跑
最常被忽略的一点：lib-flexible 设置的 font-size 是运行时行为，而 postcss-pxtorem 是构建时转换。这意味着你在开发工具里看到的 computed style 是对的，但若服务端渲染（SSR）或首屏直出没等 JS 执行完，初始 font-size 是 16px，页面会闪一下。真要兼顾 SSR，得配合服务端动态注入 style 或改用 CSS-in-JS 方案。
