全局字体设置不能只靠 font-size: 16px，因为 px 是绝对单位，无法适配不同屏幕；应使用 clamp() 结合 rem 和基础排版重置实现安全、平滑的自适应字体，并需真机测试与降级兼容。
全局字体设置为什么不能只靠 font-size: 16px？
因为固定像素值在手机、平板、桌面屏上会显得过小或过大，用户实际看到的字号和阅读体验差异极大。CSS 的 px 是绝对单位，不随视口缩放；而真正起作用的是相对单位与响应式机制的组合。
-
rem依赖根元素:root的font-size，适合统一调控全局字号基准 -
vw（视口宽度百分比）可实现“随屏幕宽度线性缩放”，但容易在极小屏下字号过小、极大屏下过大，需设上下限 - 纯
%或em容易嵌套放大，层级一深就失控，不适合全局字体锚点
用 clamp() 实现安全、平滑的自适应字体
clamp() 是目前最实用的方案：它能同时设定最小值、首选值、最大值，浏览器自动插值计算，兼顾可读性与弹性。不需要 JS、不依赖媒体查询断点，一行 CSS 就能覆盖绝大多数设备。
例如，在 :root 中写：
:root {
font-size: clamp(14px, 2.5vw, 18px);
}
含义是：字体最小 14px（保底可读），最大 18px（防桌面端过大），中间按视口宽度的 2.5% 线性变化。实测在 iPhone SE 到 27 寸 4K 屏之间过渡自然。
- 系数
2.5vw需要调试：2vw偏保守，3vw在大屏可能偏大 - 避免用
clamp(12px, 1.8vw, 16px)这类过窄区间，iPhone 横屏时1.8vw≈ 10.8px，低于系统最小可读阈值 - 不要把
clamp()套在每个p或h1上——只设在:root，让所有rem基于它计算
配合 rem 和基础排版重置才真正生效
只设 :root font-size 不够。浏览器默认样式中，body 是 16px，h1 是 2em（即 32px），这些都会绕过你的 rem 基准。必须重置基础比例。
- 在 CSS 开头加
html { font-size: 100%; }，确保1rem = 16px初始值，再被clamp()覆盖 - 所有文字容器（
p、h1–h6、li）用rem设字号，例如h1 { font-size: 1.8rem; } - 行高（
line-height）别用px，用无单位数值（如1.5），否则会和字号脱节 - 禁用
user-scalable=no的 viewport meta，否则 iOS Safari 会忽略用户缩放偏好，破坏可访问性
真机测试最容易漏掉的三个细节
开发时用 Chrome DevTools 模拟器看不出来，但真机一跑就出问题：字号忽大忽小、横竖屏切换后卡死、iOS 微信内置浏览器渲染异常。
- iOS Safari 对
clamp()支持从 v14.5 开始，旧版本会 fallback 到中间值（2.5vw），所以务必加降级：font-size: 16px; font-size: clamp(...); - 安卓微信 X5 内核（尤其 8.0.33 前）不支持
clamp()，得用媒体查询兜底，例如@media (max-width: 375px) { :root { font-size: 14px; } } - 某些 Android 浏览器会把
100vh当作“含地址栏高度”，导致视口宽度计算偏差，vw值略偏大——这时把clamp()的上限调低 1–2px 更稳妥
自适应字体不是设完 clamp() 就万事大吉，它依赖视口精度、浏览器实现一致性、以及你是否留出了足够的可读余量。最保险的做法：拿三台真机（旧 iPhone、新款安卓、Windows 笔记本）打开页面，横竖屏各切两次，盯着标题和正文看五秒——眼睛不累，才算过关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
