响应式文字大小和行高通过结合rem、em与vw单位实现，利用clamp函数设定最小、理想与最大值，确保在不同视口下字体平滑过渡且不超出合理范围；html根字体设为16px作为基准，h1、p等标签使用clamp(最小, vw动态值, 最大)控制字体大小，line-height采用无单位数值随字体同步缩放，保持视觉舒适；em用于组件内部相对布局如按钮图标对齐，避免纯vw导致极端屏幕文字失衡，经多设备测试验证可读性后，即可实现兼具稳定性与流动性的响应式文本体系。
响应式文字大小和行高的实现，关键在于根据视口尺寸动态调整字体表现。通过结合 rem、em 和 vw 单位，可以在不同设备上获得良好的可读性和布局适应性。
理解单位特性
掌握每个单位的行为方式是构建响应式文本的基础：
- rem：相对于根元素（html）的字体大小，常用于全局控制，适合做基准尺寸
- em：相对于父元素字体大小，适合局部缩放或相对排版（如按钮内图标与文字对齐）
- vw：视口宽度的百分之一，1vw = 视口宽度的1%，可实现随屏幕拉伸而变化的动态字体
使用 vw + rem 实现流体字体
将 vw 与 rem 结合，可以让字体在不同屏幕下平滑过渡，同时保留 rem 的可维护性。
html {font-size: calc(16px + 0.5vw); /* 基准字体随视口微调 */
}
h1 {
font-size: clamp(1.5rem, 2.5vw, 3rem); / 最小1.5rem，理想2.5vw，最大3rem /
}
p {
font-size: clamp(1rem, 1.3vw, 1.2rem);
}
clamp() 函数是关键，它接受三个值：最小、推荐、最大。浏览器会根据视口自动选择合适值，避免移动端过小或桌面端过大。
立即学习“前端免费学习笔记（深入）”；
设置响应式行高
行高应随字体变化同步调整，保持视觉舒适度：
- 避免固定像素行高，优先使用无单位数值（基于当前字体大小计算）
- 配合字体一起使用 clamp() 或 calc() 调整
font-size: clamp(1rem, 1.3vw, 1.2rem);
line-height: 1.6; /* 推荐无单位，自动适配当前 font-size */
}
h1 {
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1.2; / 大标题适当压紧行距 /
}
实用建议与注意事项
确保响应式文本在各种场景下表现稳定：
- 设定 html 根字体为 16px（用户默认值），便于 rem 计算
- 不要过度依赖 vw，避免小屏文字太小或大屏太大，用 clamp 限制范围
- em 适合组件内部相对尺寸，比如 .btn em 表示相对于按钮字体的图标大小
- 测试时覆盖手机、平板、桌面多种分辨率，关注可读性
基本上就这些。合理组合 rem 的稳定性、vw 的流动性与 clamp 的保护机制，就能实现自然流畅的响应式文字效果。
