flexible方案通过动态设置html根字号实现移动端适配：根字号=屏幕宽度÷10，设计稿px值除以对应根字号即得rem值，配合插件或构建工具自动转换，再加viewport和媒体查询兜底。

移动端页面用 flexible 方案解决适配难题，核心就一句话：让 1rem 的实际像素值随屏幕宽度等比变化，所有尺寸用 rem 写，页面就能自动缩放适配。

动态设置根字号是关键

flexible.js 的作用不是改布局，而是实时计算并设置 的 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 事件持续更新