通过rem与media queries结合实现文字自适应，rem是相对于根元素的字体单位，调整html的font-size可使全站文字等比缩放，示例中设置不同屏幕宽度下html的字体大小，如大于768px时为16px，小于768px时为14px，小于480px时为12px，h1使用2rem即对应32px、28px、24px，p使用1rem对应16px、14px、12px，从而实现响应式字体；建议采用移动优先策略，利用calc函数实现平滑过渡，并设定最小最大字体以保障可读性，注意控制html而非body的字体大小，合理设置断点并尊重用户系统设置，确保兼容性与可访问性。
在响应式网页设计中，文字大小的自适应是提升用户体验的关键之一。通过结合 rem 单位与 media queries，可以实现字体随屏幕尺寸平滑变化，适配手机、平板和桌面设备。
什么是 rem？
rem（root em）是相对于根元素（html）字体大小的单位。默认情况下，浏览器根字体大小为 16px，即 1rem = 16px。通过动态调整 html 元素的 font-size，所有使用 rem 的文本会等比缩放，非常适合响应式布局。
设置根字体大小并配合媒体查询
利用 media queries 检测屏幕宽度，在不同断点下设置 html 的 font-size，从而控制整个页面基于 rem 的文字比例。
示例代码：
立即学习“前端免费学习笔记（深入）”；
html {
font-size: 16px; /* 默认大小 */
}
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
@media (max-width: 480px) {
html {
font-size: 12px;
}
}
h1 {
font-size: 2rem; / 实际为 2 × 当前根大小 /
}
p {
font-size: 1rem;
}
这样，当屏幕变小时，根字体缩小，h1 和 p 等使用 rem 的元素也会自动按比例变小。
使用相对比例优化可读性
不要为每个元素在不同断点重设 font-size，而是通过统一调整根大小来驱动整体缩放，保持视觉层次一致。
技巧建议：
- 采用“移动优先”策略：先设定小屏下的 html font-size，再在大屏中增大。
- 使用弹性计算：结合 viewport 单位，如
font-size: calc(16px + 0.5vw)实现更平滑过渡（需注意兼容性）。 - 限制最小/最大字体：确保文字不会过小或过大，影响阅读。
实际应用中的注意事项
虽然 rem + media queries 非常实用，但也需注意以下几点：
- 避免在 body 上设置 font-size，应直接控制 html 元素以确保 rem 基准清晰。
- 测试主流设备分辨率，合理划分断点（如 320px、768px、1024px）。
- 考虑用户系统字体设置，保留一定的可访问性，不要强制覆盖缩放行为。
基本上就这些。用好 rem 和 media queries，能让文字真正“响应”用户的设备环境，实现自然、舒适的阅读体验。不复杂但容易忽略细节。
