最推荐用 clamp() + vw 控制字体大小，如 font-size: clamp(16px, 4vw, 32px)，兼顾平滑缩放与上下限；旧版 android webview 需媒体查询 fallback；js 方案适用于需响应横竖屏、系统字体放大等场景，但应避免滥用。
直接用 vw 配合 clamp() 是最轻量、最推荐的方案，无需 JS，兼容现代浏览器，且能避免小屏文字过小、大屏撑满的问题。
用 clamp() + vw 控制字体大小
这是目前最稳妥的纯 CSS 方式。它让字体在设定范围内随视口宽度平滑缩放，同时设上下限防止极端情况。
-
font-size: clamp(16px, 4vw, 32px)表示：最小 16px，最大 32px，中间按 4% 视口宽度线性过渡 - 标题可用更大比例（如
clamp(24px, 6vw, 48px)），正文建议更保守（如clamp(14px, 2.5vw, 20px)） - 注意：旧版 Android WebView（6–9）不支持
clamp()，需 fallback 到媒体查询
用 rem + JS 动态设置根字体
适合需要精细控制或响应横竖屏、系统字体放大等场景，比如 H5 页面适配 iPad 或微信内嵌页。
- 基础逻辑：
document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'（以 iPhone 6/7/8 的 375px 为基准） - 必须监听
resize和orientationchange，但 Safari 地址栏收起/展开也会触发 resize，可加高度变化过滤：if (Math.abs(window.innerHeight - lastHeight) > 50) - 别用
debounce延迟更新——字体重排开销低，卡顿主要来自 layout thrashing，不是计算本身
别踩这些坑
很多“自适应”失效，其实是因为几个隐蔽但致命的配置错误。
- 漏写
<meta name="viewport" content="width=device-width, initial-scale=1">—— 没它，vw和rem都会按桌面视口计算 - 用
zoom或transform: scale()整体缩放：破坏布局流、错位定位元素、对屏幕阅读器不友好，且 iOS Safari 已限制 zoom - 只设
vw不加限制：小屏下2vw在 320px 宽度时只有 6.4px，肉眼几乎不可读 - 忽略字体加载跳变：用
font-display: swap防止 FOUT/FOUT 后文字突然变大
真正难的不是写几行代码，而是判断该用 clamp() 还是 JS 控制 —— 前者够用就别动 JS，后者只在需要干预逻辑（比如检测系统字号、横竖屏、DPR）时才值得引入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
