rem响应式必须动态调整html的font-size；可用媒体查询设断点、calc或clamp实现流体缩放，js方案易引发foit和性能问题。
rem 不会自动响应屏幕，必须改 html 的 font-size
很多人写完 font-size: 1.5rem; 就以为文字能随屏幕缩放——结果在手机上还是挤成一团。根本原因：rem 只是“相对单位”，它不感知视口变化；它只认 html 元素当前的 font-size 值。而浏览器默认的 html { font-size: 16px; } 是静态的，不会随 window.innerWidth 自动变。
所以关键动作只有一个：你得主动改 html 的 font-size，让这个基准活起来。不改它，rem 和 px 在响应式效果上没区别。
用 media queries 设置断点式根字号
这是最稳定、兼容性最好、也最容易调试的方式。适用于 PC + 平板 + 手机三级适配，不需要 JS，纯 CSS 控制。
- 先定一个设计基准（比如 750px 宽的设计稿），再按比例反推各断点下的
html字号 - 推荐起始值设为
html { font-size: 14px; }，避免 iOS Safari 默认 16px 下小屏文字过大 - 断点别照搬 Bootstrap，优先按你实际设备用户分布设（如
@media (max-width: 480px)覆盖主流安卓小屏） - 字体层级统一用 rem 表达，例如：
h1 { font-size: 2.5rem; }、p { font-size: 1rem; }，这样根字号一调，全站文字等比缩放
示例：
html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }
@media (min-width: 1024px) { html { font-size: 18px; } }
用 calc(1vw) 实现流体根字号（慎用）
想让文字随屏幕宽度连续变化？可以用 vw，但直接写 html { font-size: 4vw; } 很危险：小屏下可能缩到 8px，大屏又冲到 32px，可读性崩盘。
- 务必加基础值和上限/下限控制，推荐
calc()组合：html { font-size: calc(14px + 0.3vw); } - 更稳妥的做法是搭配
clamp()（注意 Safari 15.4+ 才完全支持）：html { font-size: clamp(14px, 2.5vw, 18px); } - 这种写法对字体层级要求更高——如果
h2写死1.8rem，而html在小屏缩到 14px，那h2实际只有 25.2px，可能比p还小 - 建议配合设计系统做最小字号兜底，比如所有文本类元素加
min-font-size: 14px;（需用@supports检测）
JS 动态设置 html font-size 的坑
有些项目用 JS 计算并设置 document.documentElement.style.fontSize，看似灵活，实则容易出问题。
- 首次渲染时 JS 还没执行，会出现 FOIT（Flash of Unstyled Text）或布局跳动，尤其 SSR 场景
- 监听
resize事件不加节流，频繁触发重排，低端安卓机卡顿明显 - 别用
window.innerWidth / 750 * 100这类硬编码公式——750 是设计稿宽度，不是设备物理宽度，且未考虑 DPR（设备像素比） - 真要用 JS，优先在
DOMContentLoaded后立即执行一次，再用requestAnimationFrame节流 resize
真正难的是平衡：媒体查询不够“流体”，vw 太“滑”，JS 易出错。多数项目其实只需要 3–4 个精心选择的断点，就能覆盖 95% 的真实访问设备。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
