字体不随屏幕变化，大概率是未设viewport或未用可缩放单位；可靠方案仅有两种：rem配合js动态调根字号，或clamp()结合vw限定范围。
字体不随屏幕变化，大概率是没设 viewport 或没用可缩放单位——px 写死、em 嵌套失控、vw 没加限制，都会导致“看起来没反应”。真正能等比缩放的只有两种可靠路径：一是用 rem 配合 JS 动态调根字号，二是用 clamp() + vw 控制单个元素。其他写法不是不能动，就是动得不匀、不动或动过头。
为什么写了 vw 字体还是不缩？
只写 font-size: 4vw 是最常见翻车点。它确实会变，但小屏下算出来可能只有 12.8px（320px × 4%），被浏览器截断成最小字号（iOS 强制 ≥11px，Android WebView 也常兜底），视觉上就“卡住不动”；大屏下又可能飙到 64px，标题撑满半屏。
- 必须加
clamp()设上下限：font-size: clamp(16px, 4vw, 32px) - 旧版 Android WebView（6–9）不支持
clamp()→ 得 fallback 到媒体查询，比如@media (max-width: 320px) { .text { font-size: 16px; } } - 漏写
<meta name="viewport" content="width=device-width, initial-scale=1.0">→vw会按桌面视口（980px）计算，缩放完全失效
rem + JS 动态根字号怎么写才不崩？
核心是让 document.documentElement.style.fontSize 随屏幕宽度线性变化，所有 rem 尺寸自动响应。但直接抄网上代码容易出问题：
- 初始渲染前必须执行一次，否则白屏期用浏览器默认
16px，首屏字体错乱 - 只监听
resize不够 → iOS Safari 横竖屏切换不触发resize，必须加orientationchange - 别用
debounce延迟更新 → 字体重排开销低，卡顿来自 layout thrashing，不是计算慢 - 基准值别硬编码：设计稿宽 750px，对应逻辑宽 375px，那
fontSize = window.innerWidth / 375 * 16更稳，比/ 750 * 100少一步换算
表格/固定定位元素缩放后错位怎么办？
transform: scale() 确实能等比缩放整个表格或弹窗，但它不重排布局流，fixed 元素和点击热区都会偏移。真要用，必须补三件事：
-
transform-origin: top left→ 锚定左上角，避免缩放后内容跑出视口 - 外层容器加
overflow-x: auto和padding-bottom: 20px→ 表格滚动条不遮内容，iOS 滚动不卡 - 加
translateZ(0)触发 GPU 加速 → 解决 Windows Chrome 字体模糊、边框锯齿
真正难的不是选哪种方案，而是判断边界：纯 clamp() 足够就别动 JS；JS 方案一旦引入，就得管住 resize、orientationchange、初始渲染、DPR 适配这四件事——少一个，上线后字体就在某些机型上“假装没变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
