rem单位以html元素font-size为基准，须用JS动态计算设置（如fontSize=(screenWidth/375)*16），不可仅依赖CSS；需重置text-size-adjust和viewport，避免vw替代导致的适配缺陷。
rem单位怎么算？根字体大小必须用px设置吗
rem 的基准是 html 元素的 font-size，不是浏览器默认值，也不是“相对父元素”。只要这个值变了，所有 rem 就跟着变——这是动态调字体的核心前提。
常见错误：直接写 html { font-size: 16px; } 然后以为完事了。这在移动端完全失效，因为不同设备像素比、缩放、系统字体设置都会干扰实际渲染效果。
- 必须用 JS 动态计算并设置
document.documentElement.style.fontSize，不能只靠 CSS - 推荐以屏幕宽度为依据，例如：按设计稿宽度（如 375px）等比缩放，
fontSize = (screenWidth / 375) * 16 - 注意：iOS Safari 在横屏切换时可能不触发
resize，需监听orientationchange补充更新
媒体查询和JS动态设置冲突吗
会。纯 CSS 媒体查询只能做离散断点调整（比如 @media (max-width: 480px)），而 JS 计算能实现连续响应。两者混用容易互相覆盖，尤其当 JS 设置了内联 style 后，CSS 规则优先级更低，基本失效。
- 选一种主方案：生产环境强烈建议只用 JS 动态设置，更平滑、可控、兼容老 iOS
- 如果坚持用媒体查询，就别再用 JS 改
font-size，且断点要覆盖主流设备宽度（320px/375px/414px/768px），否则中间区间字体突变 - 注意
min-resolution或-webkit-device-pixel-ratio不适合做字体依据——它反映的是设备像素比，不是视口宽度
为什么字体在iPhone上还是发虚或缩放异常
本质是 Safari 对 text-size-adjust 和 viewport 缩放的干预。即使 rem 算对了，系统仍可能强制放大小字号文本，或因双击缩放残留状态导致布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 必须加 CSS 重置：
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } -
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">中user-scalable=no要慎用——它禁用双击缩放，但也会让视力障碍用户无法放大，合规场景建议保留可缩放 - 避免给
body或容器设固定font-size，否则会干扰 rem 继承链；所有字体统一用 rem，连line-height也建议用无单位数值或 rem
vw单位能不能替代rem做响应式字体
可以，但有明显缺陷。用 vw（比如 font-size: 4vw;）确实免去 JS 计算，但它是基于整个视口宽度，不区分设备类型，也不适配高DPR屏幕。
- iPad 竖屏时视口宽度 ≈ 768px，
4vw就是 ≈30.7px，远超阅读舒适范围，而 rem 方案可通过 JS 限制最大最小值（如限定 12px–20px） - Android 微信内置浏览器对
vw支持不稳定，某些版本会忽略或计算错误 - 如果选 vw，务必配合
clamp()：例如font-size: clamp(14px, 4vw, 20px);，但注意 IE 和旧版 Safari 不支持clamp
字体缩放这件事，真正难的不是算 rem，而是把 JS 更新时机、viewport 行为、系统辅助功能、以及设计师给的“16px 对应 375 设计稿”这些隐含约束全串起来。漏掉任意一环，用户一横屏或一缩放，字就糊了。
