直接设 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 才生效
如果页面 缺失或写成 width=device-width 却没带 initial-scale=1，iOS Safari 会以 980px 宽度渲染，此时 vw 基于 980 计算，完全失真。所有基于视口单位的逻辑都会崩。
- 正确写法：
- 禁止写成
user-scalable=no—— 这会锁死缩放，违反 WCAG 可访问性要求，且让vw在双击放大后失去意义 - 若项目需兼容微信内置浏览器（某些旧版本对
initial-scale=1解析异常），可加maximum-scale=1，但仅作兜底，不推荐长期依赖
字体大小断点 fallback 比纯公式更可控
纯 calc() 公式在极端尺寸（如折叠屏展开态、超宽显示器）下仍可能失控。比起调系数，用媒体查询分段控制更稳妥，也便于设计师对齐视觉稿。
立即学习“前端免费学习笔记（深入）”；
- 示例：在 320px–768px 用
vw主导，在 ≥768px 回归固定rem@media screen and (min-width: 320px) { html { font-size: calc(0.875rem + 0.26vw); } } @media screen and (min-width: 768px) { html { font-size: 1rem; } } - 关键点：媒体查询中的
min-width是 CSS 像素，不是物理像素，无需乘 dpr；但要确认设计稿断点是否按 CSS 像素定义 - 慎用
max-width断点——PC 端窗口缩放时会频繁触发重排，min-width更稳定
h1 到 caption）都要统一基于这个根字号演进，一旦某个组件漏了 rem 或错写成 px，整条链路就断了。 
