最轻量等比缩放方案是用vw设置html font-size再配合rem写样式，需媒体查询兜底最小/最大字号，设计稿375px时html{font-size:calc(100vw/3.75)}，并重置body默认字号为0.16rem。

直接用 vw 给 html 设置 font-size，再配合 rem 写样式，是当前最轻量、兼容性足够且无需 JS 的等比缩放方案。iOS 8+ 和 Android 4.4+ 占据绝对主流（国内已超 98.8%），vw 可放心使用。

为什么不能只用 vw 布局？

纯 vw 虽然免 JS，但会带来两个实际问题：

• 文字字号在小屏上可能过小（比如 font-size: 3.2vw 在 320px 宽设备上仅约 10.2px），可读性差
• 无法统一控制最小/最大字号边界——vw 是无条件线性变化的，而人眼对字号敏感度非线性
• 部分组件（如表单控件、图标字体）依赖固定尺寸上下文，纯 vw 易失真

所以更稳妥的做法是：用 vw 驱动根字号，用 rem 写业务样式，再用媒体查询兜底极小/极大屏幕。

html{font-size: calc(100vw / 3.75)} 怎么来的？

这个写法隐含了「设计稿按 iPhone6（375px）逻辑宽度」的前提：

• 100vw = 当前设备视口宽度（单位 px）
• 想让 1rem == 100px（方便换算：UI 标的 100px → 写 1rem），就要让 html 的 font-size = 100px
• 即：font-size: 100px == 100vw × (100 / 视口宽度) → 简化为 calc(100vw / 3.75)（因为 375 ÷ 100 = 3.75）

若设计稿是 750px（@2x），仍按 375px 逻辑宽处理；若是 640px，则用 calc(100vw / 6.4)（640 ÷ 100 = 6.4）。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

必须加的 media query 兜底

不加限制时，calc(100vw / 3.75) 在 320px 屏幕下会算出约 85.3px，导致 1rem ≈ 85px，文字几乎不可读。必须手动设边界：

• 小屏限制（如 320px）：@media screen and (max-width: 320px) { html { font-size: 85px; } }
• 大屏限制（如 iPad 类设备）：@media screen and (min-width: 640px) { html { font-size: 170px; } }
• 注意：这些值不是随便写的，是按 375px 基准同比例放大/缩小得出的（85 × 2 = 170），避免突兀跳变

如果项目要支持横屏 iPad，还需额外加 orientation: landscape 查询并重置 font-size，否则竖屏设的 170px 在横屏下会显得过大。

rem 换算和开发效率怎么保障？

别手算。推荐两种方式：

• Sass/Less 函数封装：@function rem($px) { @return ($px / 100) * 1rem; }，然后写 width: rem(375);（前提是 html 的 font-size 已设为 100px 基准）
• VS Code 插件（如 CSS Rem to Px）：开启后，光标停在 375px 上按 Alt+D（Win）或 Option+D（Mac），自动转成 3.75rem
• 切记：所有用于换算的“基准”必须统一——UI 是按 375px 设计的，代码里就别混用 750 或 640 的系数

最容易被忽略的是 body 默认字号重置。浏览器默认 16px，而你设了 html { font-size: 100px }，会导致 body 里未声明 font-size 的文字直接变成 100px。务必加一句：body { font-size: 0.16rem; }（即还原为 16px）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！