小屏段落密集需用媒体查询优化:屏幕≤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控制行长
基本上就这些。改完刷新手机预览,重点看连续三段文字的呼吸感——有留白、不粘连、眼睛不累,就算调到位了。










