直接设 font-size: 14px 在小屏上文字看不清，因高像素密度与窄视口导致缩成一团，且浏览器最小字号限制会强制撑大破坏排版；应采用 calc(0.875rem + 0.26vw) 动态设置 html 字号，并配 viewport meta 标签 initial-scale=1，必要时用媒体查询分段控制。
为什么直接设 font-size: 14px 在小屏上文字会看不清
移动端设备物理像素密度高、视口宽度窄，固定像素值的文字在 iPhone 或安卓小屏上容易缩成一团，尤其当用户未手动放大时。浏览器默认最小字号（如 Chrome Android 的 12px 下限）可能被触发，导致文字被强制撑大、破坏排版节奏。这不是 bug，而是 UA 样式和可访问性策略的主动干预。
-
rem基于根元素html的font-size，只要动态改它，所有用rem的文字就等比缩放 -
vw单位直接挂钩视口宽度，1vw = 1% of viewport width，适合做“随屏线性放大”，但纯vw在超大屏（如 4K 桌面）下字体会过大 - 二者混用（
calc()）才能兼顾小屏可读性与大屏不溢出
如何用 calc(0.875rem + 0.26vw) 实现平滑响应
这个公式是经过实测收敛的常用组合：基础用 rem 锚定设计稿基准（比如 14px → 0.875rem），再叠加 vw 补偿宽度变化。0.26vw 是经验值——在 320px 宽度时加约 0.83px，在 1920px 时加约 5px，整体控制在合理区间。
- 把该表达式设为
html元素的font-size：html { font-size: calc(0.875rem + 0.26vw); } - 确保设计稿以 16px 为基准（即 1rem = 16px），否则需换算系数，例如 14px 基准 →
0.875rem；18px 基准 →1.125rem - 注意：Safari 旧版本（≤ iOS 9.3）不支持
calc()中混用rem和vw，需加降级：html { font-size: 14px; font-size: calc(0.875rem + 0.26vw); }
viewport meta 标签必须配 initial-scale=1 才生效
如果页面 <meta name="viewport"> 缺失或写成 width=device-width 却没带 initial-scale=1，iOS Safari 会以 980px 宽度渲染，此时 vw 基于 980 计算，完全失真。所有基于视口单位的逻辑都会崩。
