响应式网页中字体大小的调整，关键在于使用相对单位（如 rem 和 em）结合媒体查询（media query），让文字在不同设备上自然适配。核心思路是：以根元素字体大小为基准，通过 rem 控制整体比例，用 em 处理局部缩放，再借助 media query 在不同屏幕宽度下动态调整根字号，实现全局协调的响应式文本。
rem 与 em 的作用区别
理解 rem 和 em 是构建弹性字体系统的基础：
- rem：相对于根元素（html）的字体大小。例如 html 字号设为 16px，1rem 就等于 16px。页面所有使用 rem 的元素都会随根字号变化而等比缩放。
- em：相对于父元素的字体大小。常用于组件内部微调，比如按钮内文字比父级小 10%，可用 0.9em，这样即使父级字体变大，按钮文字也按比例缩小。
建议布局和标题用 rem，组件内间距或图标文字用 em，保持结构清晰又灵活。
设置可调的根字体大小
在默认状态下设定 html 的 font-size，作为 rem 计算的基准：
立即学习“前端免费学习笔记（深入）”；
html {font-size: 16px; /* 基准值，可在 media query 中调整 */
}
然后所有其他字体基于 rem 定义：
h1 { font-size: 2rem; } /* 32px */p { font-size: 1rem; } /* 16px */
.small { font-size: 0.875rem; } /* 14px */
这样只要修改 html 的 font-size，整个页面字体就会按比例变化。
用 media query 动态调整根字号
根据不同屏幕宽度，调整 html 的 font-size，实现响应式字体层级：
/* 小屏手机 */@media (max-width: 480px) {
html { font-size: 14px; }
}
/ 平板 /
@media (min-width: 481px) and (max-width: 768px) {
html { font-size: 15px; }
}
/ 桌面端 /
@media (min-width: 769px) {
html { font-size: 16px; }
}
这种策略让小屏上文字略小节省空间，大屏上更清晰易读。你也可以反向操作，在小屏增大根字号提升可读性，取决于设计目标。
进阶技巧：流体字体 + rem 回退
现代浏览器支持 CSS clamp() 实现流体字体，无需多个 media query：
html {font-size: clamp(14px, 2.5vw, 18px);
}
这表示根字号最小 14px，最大 18px，中间随视口宽度变化。配合 rem 使用，所有文本自动获得平滑缩放效果。旧浏览器不支持时，可先设固定 rem 基准，再用 clamp 覆盖，提供渐进增强。
基本上就这些。关键是建立以 rem 为核心的字体体系，用 media query 或 clamp 控制根字号，em 用于局部弹性处理。不复杂但容易忽略细节，比如避免在多层嵌套中滥用 em 导致计算混乱。统一规范后，响应式字体就能自然适配各种设备。
