lib-flexible仅动态设置html的font-size，需搭配px2rem-loader或postcss-px2rem实现px转rem；必须删除index.html中viewport meta，改用其运行时注入版本；import路径须为'lib-flexible/flexible'；大屏兼容推荐amfe-flexible或自定义media fallback。
直接上结论：lib-flexible 本身只负责动态设置 html 的 font-size，它不处理 CSS 单位转换；必须搭配 px2rem-loader 或 postcss-px2rem 才能实现“写 px、自动转 rem”的开发体验。单独引入 lib-flexible 后页面会乱，这是正常现象——不是你配错了，是它本来就不干这事。
为什么必须删掉 index.html 里的 viewport meta？
lib-flexible 启动时会检查 document.head 中是否已有 meta name="viewport"。如果存在，它就放弃控制，直接用你写的那个；而你写的往往只是 width=device-width, initial-scale=1.0，这会导致缩放失效、font-size 计算错乱、dpr 判断失准。
- 务必打开
public/index.html，找到并注释或删除整行<meta name="viewport" ...> - 不要手动补一个“看起来合理”的 viewport ——
lib-flexible会在运行时注入带maximum-scale=1.0等严格限制的版本，这是高清屏适配的关键 - 如果你用的是 Vue CLI 3+，且已配置了
vue.config.js中的devServer.headers或服务端强制注入 viewport，也要一并关掉
main.js 中该 import 哪个路径？
必须用 import 'lib-flexible/flexible'，而不是 import 'lib-flexible'。
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
-
lib-flexible包根目录下没有默认导出（无main字段指向可执行入口），直接import 'lib-flexible'在某些 Webpack 版本下会静默失败，html根节点font-size不变 -
flexible.js是实际执行逻辑的文件，它会立即执行并监听resize和pageshow事件 - 如果你项目用了 TypeScript，还需额外安装
@types/lib-flexible（非必需，但避免 TS 报错）
px 转 rem 的 loader 选哪个？怎么配才不踩坑？
Vue CLI 2（webpack 3）用 px2rem-loader，Vue CLI 3/4（webpack 4+）优先用 postcss-px2rem 或 postcss-plugin-px2rem。二者行为差异极大：
-
px2rem-loader是 webpack loader，在 CSS 解析前做字符串替换，只处理<style></style>标签和.css文件，对style="..."或 JS 动态插入的样式完全无效 -
postcss-px2rem是 PostCSS 插件，在 AST 层操作，支持更细粒度控制（比如跳过某类选择器、保留特定 px 值），且能与autoprefixer等共存 -
remUnit值必须和设计稿匹配：750px 设计稿填75（750 ÷ 10），375px 设计稿填37.5；填错会导致所有尺寸放大/缩小一倍 - 若用
postcss-px2rem，配置位置在vue.config.js的css.loaderOptions.postcss.plugins数组里，不是postcss.config.js
大屏（PC）也想兼容？别改源码，换思路
原版 lib-flexible 在屏幕宽度 > 540px 时会锁死 font-size 为 54px，这不是 bug，是它的设计目标（纯移动端）。强行修改 node_modules/lib-flexible/flexible.js 有三个问题：升级依赖时丢失、团队协作难同步、无法用 ES 模块语法热更新。
- 更稳妥的做法是：用
postcss-pxtorem+ 自定义 media query fallback，例如对@media (min-width: 768px)单独设一套 rem 基准 - 或者彻底弃用
lib-flexible，改用amfe-flexible（淘宝已迁移到此包，维护更活跃，PC 兼容性更好） - 如果必须保留在 Vue 2 里跑 PC + 移动，建议把
flexible.js复制到src/utils/下，再按需 patchrefreshRem函数，确保width = width * dpr这句在所有分支都生效
真正容易被忽略的点是：lib-flexible 的 font-size 计算依赖 dpr，而某些安卓 WebView 或微信内置浏览器在横屏切换时不会触发 refreshRem，需要手动监听 orientationchange 并调用 flexible.refresh() —— 这个细节几乎没人提，但上线后横屏白屏或字体突变，八成出在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
