使用 rem 和 em 结合 media query 实现响应式排版：rem 基于根元素，适合全局字体控制；em 相对父级，用于局部比例调整；通过 media query 动态设置 html 字体大小，实现跨设备自适应；行高推荐用无单位数值或 em，随字号比例变化；建立统一文本类提升可维护性，确保多端可读性与视觉协调。
响应式网页设计中，字体与行高的优化直接影响内容的可读性和用户体验。使用 rem 和 em 单位结合 media query 可以实现灵活、可维护的文本排版系统。
理解 rem 与 em 的作用机制
rem（root em）基于根元素（html）的字体大小，不受父级影响，适合全局控制。设置 html 字体为 16px 时，1rem = 16px。通过调整根字体大小，可以整体缩放页面文字。
em 相对于父元素字体大小，常用于局部微调，如按钮内间距或行高，能更好保持比例关系。例如，若父元素为 16px，2em 就是 32px。
推荐做法：用 rem 控制标题、段落等主要文本尺寸，用 em 调整行高、边距等相对值，确保在不同屏幕下视觉协调。
通过 media query 动态调整根字体大小
根据不同设备宽度动态改变 html 的 font-size，使整个排版系统自适应。
- 小屏（手机）：设置较小的根字体，避免文字过大占满屏幕
- 中屏（平板）：适度放大，提升阅读舒适度
- 大屏（桌面）：进一步增大字体，增强可读性
示例代码：
html {
font-size: 14px;
}
<p>@media (min-width: 768px) {
html { font-size: 16px; }
}</p><p>@media (min-width: 1024px) {
html { font-size: 18px; }
}</p>设定响应式行高（line-height）提升可读性
行高应随字体变化而调整。固定行高在小屏可能拥挤，大屏则松散。建议使用无单位数值或 em 来定义 line-height，使其与当前字体成比例。
例如：
p {
font-size: 1rem;
line-height: 1.6em; /* 相对于当前字体大小 */
}
<p>h1 {
font-size: 2rem;
line-height: 1.2em;
}</p>当根字体变大时，行高自动按比例增长，保持段落呼吸感。
实践建议：建立可维护的排版体系
为提高一致性，可预设几组响应式文本类，如 .text-sm、.text-base、.text-lg，并配合断点统一管理。
- 统一设置 html 基准字体，避免浏览器默认差异
- 所有字体尺寸优先使用 rem，行高/内边距可用 em 维持比例
- 在 media query 中只调整根字体，不重复设置每个元素大小
- 测试多设备实际显示效果，关注移动端换行与段落间距
基本上就这些。合理运用 rem、em 和媒体查询，能让网页文本在各种屏幕上都清晰易读，同时减少冗余样式代码。关键在于建立比例思维，而不是固定像素值。
