css段落在小屏太密集影响阅读怎么办_媒体查询增加line-height与margin

小屏段落密集需用媒体查询优化：屏幕≤768px时设line-height为1.8、margin-bottom为1.4rem，字号不低于16px，慎用letter-spacing负值，添加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 控制行长

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