clamp()实现自适应字体需用vmin而非vw，实测调整系数，加fallback，分层设置参数，配合text-size-adjust:100%控制缩放，真机验证横屏/键盘/系统字体场景。
用 clamp() 实现连续自适应字体，别只写一行就完事
直接给 font-size 写 clamp(16px, 4vw, 24px) 很容易失效——小屏下 4vw 可能仍大于 16px，下限压根不触发。关键不是“写了 clamp”，而是参数是否贴合真实设备范围。
- 首选值必须用
vmin而非vw：横屏时vmin取宽高较小者，避免单行文字被拉长撑出屏幕 - 系数要实测：iPhone SE（375px 宽）下
4vmin ≈ 15px，若下限设16px就永远卡在中间值；可改用clamp(16px, 3.2vmin, 24px)或降为3vmin - 必须加 fallback：旧版 Safari 不支持
clamp()，得前置声明font-size: 16px;，再覆盖font-size: clamp(...); - 层级字号不能共用一套参数：h1 用
clamp(24px, 6vmin, 48px)，p 就得用clamp(14px, 4vmin, 20px)，否则缩放后视觉比例全乱
text-size-adjust: 100% 是解决移动端“字体忽大忽小”的唯一有效 CSS 属性
viewport meta 标签对浏览器自动缩放文字完全无效，text-size-adjust 才是正解。但它只作用于文本容器，不是文本本身。
- 必须设在包裹文本的块级祖先上，比如
.header、#main-content，写在p或span上无效 -
100%比none更合理：允许用户通过系统设置调大字体（辅助功能），但禁止浏览器基于行宽“擅自放大”菜单或按钮文字 - 真机测试不可跳过：DevTools 的响应式预览默认禁用自动缩放，模拟不出问题；iOS 上尤其明显，比如导航栏文字在横屏时突然变大
- 查是否生效，看 DevTools 的 Computed 面板里
text-size-adjust值是不是100%，不是auto——auto表示选择器没匹配到或被覆盖
混用 rem 和 vw 设置根字号时，这些坑几乎必踩
用 JS 动态设 html 的 font-size（如 document.documentElement.style.fontSize = window.innerWidth / 375 * 100 + 'px'）看似灵活，但实际极易翻车。
- resize 事件高频触发导致页面闪动：必须用
requestAnimationFrame节流，或监听window.matchMedia('(orientation: landscape)')单独处理横竖屏 - iOS Safari 键盘弹出时会重算
vw，输入框附近元素可能跳动；而rem在键盘弹出时不受影响 - border 和 padding 混用易错位：比如
padding: 0.3rem 1vw，在不同 DPR 下渲染精度不一致，iPhone X 上左右内边距肉眼可见不对齐 - 安卓 WebView 对
rem计算有延迟：初始化后建议主动触发一次document.body.offsetHeight强制重排
超小屏或超宽屏下，clamp() 和 vw 都需要兜底
纯 CSS 方案在极端尺寸下大概率失效，不是参数调得不够细，而是浏览器自身限制使然。
- iOS 强制最小字体为 12px：哪怕
2vw在 320px 屏上算出来是 6.4px，最终也显示为 12px；需配合媒体查询或min-font-size（仅 Safari 支持） - 桌面端访问 H5 页面时，
100vw可能让按钮大得离谱：必须加max-width限制容器宽度，或用 JS 拦截宽屏并降级为固定字号 - 设计稿是 750px，但实际设备宽度可能达 1200px（折叠屏）：此时
html { font-size: 13.33vw }会让 1rem = 160px，文字爆炸；应设max-height或用@media (min-width: 1024px)切换策略
实际项目里，没有“一招鲜”的方案。clamp() 负责主流机型的平滑缩放，text-size-adjust 拦住浏览器胡乱放大，JS 动态 rem 仅用于需要精确对齐设计稿的场景——而每一种都得配真机验证，尤其是横屏、键盘弹出、系统字体放大这三类状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
