lib-flexible 是阿里手淘团队推出的移动端适配方案，通过 viewport 缩放 + 动态根字体 + rem 布局协同解决高清屏下 1px 边框过粗、文字模糊等问题；其核心是根据 dpr 动态设置 viewport scale 和 html font-size，并配合 px2rem 工具实现设计稿到代码的自动换算，但存在大屏适配缺陷与兼容性问题，现已被视为过渡方案。
lib-flexible 是阿里手淘团队推出的移动端适配方案，核心目标是解决高清屏（如 Retina）下视觉模糊、1px 边框过粗、UI 图标注与实际渲染不一致等问题。它不是单纯设置 rem，而是结合 viewport 缩放 + 动态根字体 + rem 布局三者协同工作。
自动设置 viewport 缩放比例
高清屏的设备像素比（dpr）通常为 2 或 3，此时 1 个 CSS 像素会映射到多个物理像素，导致边框发虚、文字锯齿、图片模糊。lib-flexible 通过动态写入 meta 标签来修正缩放：
- 读取 window.devicePixelRatio 获取当前设备 dpr
- 计算缩放值：scale = 1 / dpr（例如 dpr=2 → scale=0.5；dpr=3 → scale≈0.333）
- 注入 viewport：content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"
- 该操作让 CSS 像素与物理像素 1:1 对齐，从根源上缓解 1px 粗边、文字渲染失真问题
动态设置 html 的 font-size（rem 基准）
lib-flexible 默认将屏幕宽度（document.documentElement.clientWidth）除以 10，作为 1rem 的像素值：
- 公式：1rem = 屏幕宽度 ÷ 10
- iPhone SE（375px 宽）→ font-size = 37.5px → 1rem = 37.5px
- 设计稿按 750px 宽度出图 → 1rem = 75px，此时 150px 元素 = 2rem
- 该策略保证所有 rem 单位元素随屏幕等比缩放，无需媒体查询
配合 px2rem 工具实现高效开发
手动把设计稿上的 px 换算成 rem 极其繁琐。实际项目中需搭配构建工具自动转换：
- 安装 px2rem-loader（Webpack）或 postcss-px2rem（PostCSS）
- 配置 remUnit 参数：若设计稿为 750px，则设 remUnit: 75（因 750 ÷ 10 = 75）
- CSS 中写 width: 150px，构建后自动转为 width: 2rem
- 确保 UI 标注单位与开发单位统一，避免换算误差和沟通成本
注意事项与兼容性提醒
lib-flexible 虽曾广泛使用，但存在明显局限：
- 对大屏（如折叠屏、Pad）缺乏约束，屏幕宽 > 750px 时 font-size 会持续增大，导致文字/控件异常放大
- 强制 viewport 缩放在部分 Android WebView 或新版 iOS 中可能触发兼容问题（如 input 失焦、fixed 定位偏移）
- 现代项目更推荐 vw/vh 或 viewport + postcss-plugin-viewport 方案，lib-flexible 已被官方标记为“过渡方案”
- 如必须使用，建议加最大宽度保护逻辑（例如 screen.width > 750 时 font-size 不再增长）
