小屏段落密集需用媒体查询优化：屏幕≤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），别低于 14pxmax-width: 90% 或 30em 控制行长基本上就这些。改完刷新手机预览，重点看连续三段文字的呼吸感——有留白、不粘连、眼睛不累，就算调到位了。
以上就是css段落在小屏太密集影响阅读怎么办_媒体查询增加line-height与margin的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
628
收藏
取消收藏
