在响应式网页开发中，字体大小如果不能随屏幕尺寸灵活变化，会直接影响阅读体验和 accessibility。使用 CSS 的 rem 与 em 单位，并结合 media query 控制根元素字体大小，是目前主流且稳定的解决方案。
一、rem 与 em 的基础区别
rem 是相对于 HTML 根元素（即 <html>）的字体大小来计算的，而 em 是相对于当前元素父级的字体大小。理解这一点，是做好响应式字体的前提。
- rem：全局统一基准，改根字体即可整体缩放
- em：随父级变化，适合组件内部相对排版
二、用 media query 控制根字体
我们可以在 CSS 中通过 media query 针对不同屏幕宽度，设置不同的根字体大小，从而让所有使用 rem 的地方自动跟着变。
/* 默认根字体 */
html {
font-size: 16px;
}
/* 屏幕小于 768px 时，缩小根字体 */
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
/* 屏幕大于 1200px 时，放大根字体 */
@media (min-width: 1200px) {
html {
font-size: 18px;
}
}
/* 使用 rem 设置字体 */
body {
font-size: 1rem; /* 跟随根字体 */
}
.title {
font-size: 2rem; /* 始终是根字体的两倍 */
}
三、em 在局部模块中的用法
当某个卡片或按钮需要独立于全局缩放时，可以用 em 基于父容器调整。例如下面这段，按钮文字大小随卡片字体变化：
<div class="card" style="font-size: 1.2rem;"> <p>这是卡片内容</p> <button style="font-size: 0.9em;">点击</button> </div>
四、推荐的实践方案
通常建议用 rem 控制大部分排版，用 em 处理嵌套组件的细微差异，并用 media query 切分断点。常见断点可参考下表：
| 设备类型 | 屏幕宽度 | 根字体建议 |
|---|---|---|
| 手机 | < 768px | 14px |
| 平板 | 768px - 1199px | 16px |
| 桌面 | ≥ 1200px | 18px |
五、注意事项
不要在根元素上混用 px 和 rem 导致混乱；避免多层 em 嵌套造成字体大小难以预测。使用浏览器开发者工具切换设备尺寸，能快速验证 media query 是否生效。
合理组合 rem、em 与 media query，可以让网页字体在各种屏幕上既清晰又协调。
rememmedia_query修改时间：2026-07-28 21:54:25