响应式字号应依赖系统设置而非手动切换：使用rem单位适配系统缩放，配合clamp()兜底异常尺寸，并通过prefers-*媒体查询增强可访问性，避免JS干预破坏用户偏好。
响应式设计本身不会自动感知用户偏好，但可以结合系统级设置与CSS能力实现字号的“被动响应”——关键不是主动“切换”，而是让字体天然适配用户的系统字号缩放、辅助功能开关和视力需求。
尊重系统字号缩放（最基础也最重要）
现代浏览器会将用户在操作系统或浏览器中设置的“更大字体”“粗体文本”“辅助缩放”等选项映射为根元素的 font-size 变化。只要全站使用 rem 单位，并避免硬写 html { font-size: 16px } 这类固定值，文字就能自动放大。
- Windows 设置「显示-缩放与布局」为125% → 浏览器默认根字号变为20px → 所有
1rem自动变成20px - iOS「设置-辅助功能-显示与文字大小-更大字体」开启 → Safari 将提升根字号，rem 文字同步变大
- 切忌用
px写正文、按钮文字，否则这些设置完全无效
用 clamp() 容纳系统缩放后的实际渲染尺寸
单纯依赖 rem 不够——当用户开了系统放大，再叠加视口变化，字号可能失控。此时 clamp() 能兜底：它约束的是最终计算出的像素值，不是单位本身。
- 例如：
font-size: clamp(1.125rem, 1.2vw + 0.9rem, 1.375rem); - 在 iPhone 上用户开启「最大可读性」，系统把 1rem 映射为 24px，此时 clamp 的 min/max 仍以这个 24px 为基准计算，不会超出可读范围
- 真正起作用的是三个参数都用相对单位（rem/vw），且数值经真实设备+系统设置组合测试过
监听 prefers-reduced-motion 和 prefers-contrast（进阶可访问性）
CSS 媒体查询可检测用户是否启用了高对比度、减少动画等辅助偏好，虽不直接改字号，但可用于增强可读性：
-
@media (prefers-contrast: high) { body { letter-spacing: 0.02em; } }—— 避免文字粘连 -
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }—— 防止字号过渡动画干扰阅读节奏 - 部分屏幕阅读器会强制重设字体，此时确保 HTML 结构语义清晰比强行控制字号更有效
不推荐 JS 主动“切换字号”的原因
所谓“大中小按钮”切换，本质是覆盖系统偏好，反而损害可访问性：
- 点击“大号”后，若用户已用系统放大到 200%，页面字号反而被压回 150%，体验断裂
- JS 修改
document.documentElement.style.fontSize会导致首屏闪动、SSR 失效、横竖屏切换错乱 - 真正符合 WCAG 标准的做法是：放弃控制权，用 rem + clamp + 系统感知单位，让浏览器和系统共同决定最终字号
