flexible方案通过动态设置html根字号实现移动端适配：根字号=屏幕宽度÷10，设计稿px值除以对应根字号即得rem值，配合插件或构建工具自动转换，再加viewport和媒体查询兜底。
移动端页面用 flexible 方案解决适配难题，核心就一句话：让 1rem 的实际像素值随屏幕宽度等比变化，所有尺寸用 rem 写，页面就能自动缩放适配。
动态设置根字号是关键
flexible.js 的作用不是改布局，而是实时计算并设置 <html> 的 font-size。它默认把屏幕宽度（document.documentElement.clientWidth）除以 10，结果就是根字号大小。比如 iPhone SE 屏宽 375px，根字号设为 37.5px；iPhone 15 Pro Max 屏宽 430px，根字号就是 43px。这样设计稿上量出的 px 值，除以对应根字号就能直接转成 rem，无需手动查表或写媒体查询。
- 设计稿是 750px 宽 → 理想根字号是 75px（750 ÷ 10），那么 150px 的按钮 = 2rem
- 设计稿是 375px 宽 → 理想根字号是 37.5px，同样 150px 的按钮 = 4rem
- 脚本会自动处理所有中间宽度，包括非标准屏、iframe 嵌入区域、折叠屏展开态等
配合工具把 px 转 rem 变得轻松
手写 rem 值容易出错且效率低。推荐两种落地方式：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- VSCode 安装 cssrem 插件，选中 px 值按快捷键（如 Ctrl+Shift+P → “px to rem”），自动按当前项目设定的基准（如 75px）换算
- Vite 或 Vue CLI 项目可配 postcss-pxtorem 或 px2rem-loader，构建时自动把 CSS 中的 px 转成 rem，开发时仍写 px，更符合直觉
- 注意：只转换用于布局和尺寸的 px（如 width、padding、font-size），不转换 border、阴影、背景图等需保持物理像素清晰的属性
必要兜底和边界控制
flexible 不是万能的，需加几条简单 CSS 防止极端情况：
- 加
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，锁定理想视口 - 用媒体查询限制最大宽度，避免大屏上文字过大、留白失控：
@media (min-width: 750px) { html { font-size: 75px !important; } } - body 加
min-width: 320px; max-width: 750px; margin: 0 auto;，确保小屏不压缩、大屏不拉伸失真
Vue / Vite 项目集成很简单
在现代前端工程中接入 flexible 几乎零成本：
- 安装：
npm install lib-flexible - 入口文件（如
main.ts）顶部直接引入：import 'lib-flexible' - Vite 用户注意：若使用
build.rollupOptions.external排除了 flexible，需改为内联或手动插入 script 标签 - 不需要额外初始化逻辑，库会在 DOM ready 后自动执行，并监听 resize 和 orientationchange 事件持续更新
