小屏阅读太密？CSS行距调整技巧

小屏阅读文字拥挤、视觉压迫感强？问题根源往往在于行高和段间距未针对移动端做适配——本文直击痛点，手把手教你用媒体查询精准优化：当屏幕宽度≤768px时，将段落行高设为无单位的1.8、下边距设为1.4rem，并同步确保字号不低于16px、禁用负字间距、添加max-width控制行长；所有建议均基于真实排版逻辑与响应式最佳实践，改完即见清爽呼吸感，让手机端阅读真正轻松不费眼。

小屏段落太密集，核心是行高（line-height）和段间距（margin）在移动端没做适配。光靠全局设置不够，得用媒体查询针对性调整。

用媒体查询单独优化小屏段落行高

默认的 line-height 在手机上常显得过小（比如 1.4 或 1.5），文字挤在一起。建议在屏幕宽度 ≤ 768px 时提升到 1.7–2.0：

@media (max-width: 768px) {
  p {
    line-height: 1.8;
  }
}

注意：别直接写成 line-height: 2 这样的无单位值（它继承的是计算后值），用无单位数字更安全，浏览器会基于当前字号自动计算。

给段落加合理上下边距，避免“贴脸”

小屏竖屏空间有限，但段落紧挨着会加重视觉压迫。重点加 margin-bottom，顶部留白通常由上一段的 bottom margin 覆盖即可：

@media (max-width: 768px) {
  p {
    margin-bottom: 1.4rem; /* 推荐用 rem，随字体缩放 */
  }
}

• 避免用 px，否则字体缩放时边距不协调
• 如果段落内有标题或图片，可对 p + p 单独设更小的 margin-bottom，防冗余空隙

顺手检查其他影响阅读密度的样式

光调 line-height 和 margin 不够，这些也常拖后腿：

• 字号太小：小屏建议正文至少 16px（或 1rem），别低于 14px
• 字间距（letter-spacing）负值：移动端慎用负值，容易糊成一片
• 段落最大宽度（max-width）没限制：窄屏上全宽显示反而导致单行字数过多，建议加 max-width: 90% 或 30em 控制行长

基本上就这些。改完刷新手机预览，重点看连续三段文字的呼吸感——有留白、不粘连、眼睛不累，就算调到位了。

今天关于《小屏阅读太密？CSS行距调整技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！