合理设置行高与字体大小比例（1.4–1.8倍），使用无单位line-height和相对单位，结合设备特性与内容类型通过媒体查询优化排版，提升跨设备文字可读性。
在响应式网页设计中，文字可读性直接影响用户体验。随着设备屏幕尺寸和分辨率的多样化，仅设置字体大小不足以确保文本清晰易读。合理搭配CSS中的行高（line-height）与字体大小（font-size），是提升跨设备阅读体验的关键。
理解行高与字体大小的关系
字体大小决定字符的高度，而行高控制行与行之间的垂直间距。两者共同影响段落的视觉密度：
- 行高过小会导致文字拥挤，难以区分上下行
- 行高过大则使段落松散，破坏阅读连贯性
- 合适的比例能让文本“呼吸”，提升扫视效率
使用相对单位提升响应灵活性
在响应式设计中，避免使用固定像素值定义行高。推荐采用无单位数值（unitless）或相对单位：
- 无单位 line-height：如 line-height: 1.6，基于当前字体大小计算，子元素可继承并按自身字号调整，更灵活
- em 或 rem 设置 font-size：配合媒体查询动态调整基础字号，行高自动适配
针对不同屏幕优化排版节奏
移动端和桌面端阅读场景不同，需差异化设置：
立即学习“前端免费学习笔记（深入）”；
- 手机小屏：适当减小字体（如 16px），保持足够行高（1.6–1.8），避免手指误触相邻行
- 平板或桌面：可增大字体（18px–20px），行高略收紧（1.5–1.6），提升信息密度
- 长段落内容（如文章页）：优先保证宽松行距，降低阅读疲劳
考虑字体特性与内容类型
不同字体的x高度、字怀等特征影响实际视觉效果，不能一概而论：
- 高 x-height 字体（如 Open Sans）视觉上更紧凑，可适当增加行高
- 衬线体用于正文时，通常比无衬线体需要更多行间空间
- 标题与正文应有明确的行高区分，避免层级模糊
基本上就这些。保持字体与行高的协调比例，使用相对单位，按设备和内容类型灵活调整，就能在各种屏幕上实现舒适的文字阅读体验。不复杂但容易忽略细节。
