rem是跨终端文字一致的首选单位，但需用clamp(14px,2.5vw,18px)设根字号以兼顾最小可读性、视口适配与系统缩放响应，辅以text-size-adjust:100%禁用浏览器自动缩放。
直接用 px 写死字号，在手机上会小得看不清；用 % 或 em 又容易层层继承错乱；想靠 rem 统一控制，却常因根字体没设对或未适配高倍屏失效。跨终端文字大小一致的关键，不是选哪个单位，而是控制「基准」和「缩放边界」。
为什么 rem 是首选，但很多人用错了
rem 相对于根元素（html）的 font-size，天然适合全局调控。问题出在根字号设置方式：
- 写死
html { font-size: 16px; }→ 手机上文字不随系统缩放变化，也无视用户设置的“更大文字”偏好 - 用 JS 动态算
document.documentElement.style.fontSize→ 容易漏掉orientationchange、resize、系统字体缩放变更等时机 - 只按屏幕宽度缩放，忽略设备像素比（
window.devicePixelRatio）→ 高清屏上文字发虚或偏小
推荐做法：用 clamp() 配合视口单位，例如：
html { font-size: clamp(14px, 2.5vw, 18px); }它能保证最小不小于 14px（防手机过小），最大不超 18px（防大屏撑开），中间随视口线性变化，且天然响应系统字体缩放（前提是浏览器支持 clamp，Chrome 88+、Safari 14.1+、Firefox 79+）。
vw 和 vmin 的实际使用边界
单靠 vw 做字号容易在竖屏小屏上缩得太小（比如 iPhone 竖屏宽度仅 375px，4vw = 15px，再小就难读）。这时改用 vmin 更稳妥：
立即学习“前端免费学习笔记（深入）”；
-
font-size: 4vmin;→ 取视口宽高中的较小值，横竖屏都更可控 - 但注意：某些安卓 WebView 对
vmin支持不稳定，建议加降级：p { font-size: 16px; font-size: 4vmin; } - 不要全站用
vmin，标题、按钮等强调元素可保留固定rem，正文用vmin，避免层级感丢失
必须处理的两个隐藏干扰项
即使字号单位选对了，以下两点仍会让文字在不同终端表现不一致：
-
用户系统级字体缩放：iOS/Android 允许用户在设置里放大系统字体。CSS 中用
px或rem（根字号非em）会绕过该设置；而用em、%或未重置的rem则会响应。如需尊重用户偏好，别重置html的默认字号（即不写html { font-size: ... }），或用font-size: 1rem;显式继承 -
浏览器默认缩放行为：Chrome 在移动端默认启用「自动缩放」（
text-size-adjust: auto），可能让文字忽大忽小。统一加上：html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }禁用该特性，让 CSS 控制完全生效
真正难的不是写几行 CSS，而是判断当前项目是否需要响应系统缩放、是否要兼容老版 WebView、有没有设计侧的字号阶梯规范。这些决策一旦定错，后期改起来比重写样式表还费劲。
