使用相对单位和clamp()函数协调字体与行高，确保响应式设计中文字可读性；通过rem、vw设置font-size，配合无单位line-height（如1.6），实现行距自动适配；结合媒体查询在小屏微调line-height，避免过大或过紧；正文行高建议1.5-1.8，标题1.1-1.4，提升多设备阅读体验。
响应式网页设计中，字体大小和行高（line-height）的协调直接影响可读性和视觉舒适度。在不同屏幕尺寸下，文字不仅要清晰易读，还要保持良好的段落节奏。以下是实用方法帮助你协调 CSS 响应式字体与 line-height。
使用相对单位设置 font-size 和 line-height
为了实现更好的响应性，推荐使用 rem、em 或 vw 来定义字体大小，而不是固定像素值。
line-height 使用无单位数值（如 1.5）是最佳实践，因为它会基于当前 font-size 进行计算，自动适配不同字号。
例如：body {
font-size: 1rem;
line-height: 1.6;
}
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
}
这样当 h1 的字体在小屏变小、大屏变大时，line-height 会按比例调整，避免行距过紧或过松。
立即学习“前端免费学习笔记（深入）”；
结合 clamp() 实现平滑响应式文本
使用 clamp() 函数可以设定字体大小的最小值、首选值和最大值，让文本自然适应屏幕宽度。
关键点是：搭配一个合适的无单位 line-height，使行高随字体变化而弹性调整。
p {
font-size: clamp(1rem, 2.5vw, 1.5rem);
line-height: 1.7;
}
在这个例子中，段落文本从小屏到大屏平滑缩放，line-height 始终保持与字体协调的比例。
针对不同断点微调 line-height
虽然无单位 line-height 能自动适应，但在极端尺寸下可能需要手动优化。
比如大标题在移动端字体缩小后，原本适合桌面端的 line-height 可能显得过大。
可通过媒体查询局部调整：@media (max-width: 480px) {
h1 {
line-height: 1.3;
}
}
这种做法保留了响应式字体的流动性，同时在关键断点提升排版精度。
保持可读性的基本原则
无论字体如何变化，始终注意以下几点：
- 正文 line-height 推荐在 1.5 - 1.8 之间，确保段落呼吸感
- 标题 line-height 可稍紧凑（1.1 - 1.4），突出层级
- 避免使用固定像素 line-height（如 line-height: 30px;），它不会随 font-size 缩放
- 长段落、小字号时适当增大 line-height 提升阅读体验
基本上就这些。核心是让 line-height 成为 font-size 的“比例伙伴”，用相对单位和 clamp() 构建灵活系统，再辅以必要断点微调，就能实现真正协调的响应式文字排版。
