宽屏下文字稀疏难读的主因是line-height与容器宽度失配；应优先使用无单位line-height、设置max-width限制行长、配合响应式font-size断点，并确保margin: 0 auto居中及box-sizing: border-box正确应用。
line-height 设置过大导致宽屏下文字稀疏难读
宽屏设备上，如果 line-height 固定写死（比如 line-height: 2.5），内容区宽度拉到 1200px+ 时，行高不变但行长猛增，视觉上每行字像被“吊”在空里，阅读节奏断裂。这不是字体问题，是行高与容器宽度失配的典型表现。
- 优先用无单位数值（如
line-height: 1.6），它会基于当前font-size动态计算，比px/em更适应响应式布局 - 避免在文章容器上直接设
line-height，改用max-width限制内容区最大宽度（如max-width: 720px），让行长可控，再配合理想的无单位line-height - 若必须适配超宽屏，可用
@media (min-width: 1440px)微调，比如把line-height从1.6降到1.5—— 宽屏下稍紧凑反而更稳
max-width 和 padding 搭配不当撑满整屏
很多人设了 max-width: 800px 却忘了加 margin: 0 auto，结果内容左对齐、右侧大片留白；或者加了 padding: 2rem 但没配合 box-sizing: border-box，实际内容区更窄，行高问题被进一步放大。
-
margin: 0 auto是居中前提，缺了它max-width就失效 -
padding建议用rem或%，避免固定px在高分屏下显得过厚；同时确保父容器有box-sizing: border-box - 移动端常忽略的点：
max-width要配合width: 100%使用，否则小屏下可能不占满可用宽度
font-size 响应式断点没覆盖主流宽屏尺寸
只在 768px 和 1024px 设了 font-size，到了 1440px 或 1920px 屏幕，字号没变，但行长翻倍，同样 line-height: 1.6 就显得松垮。行距是否舒适，本质是字号、行长、行高三者共同作用的结果。
- 建议至少设三个断点：
768px（平板）、1200px（宽屏入门）、1600px（4K常见宽度） - 字号调整幅度宜小，例如从
1rem→1.05rem→1.1rem，大跳容易破坏行高比例 - 别用
vw直接驱动正文font-size（如font-size: 2.5vw），它在超宽屏下会失控，更适合标题类元素
line-height 在 flex / grid 容器中意外继承失效
把文章段落放进 display: flex 或 display: grid 的容器后，line-height 看似没生效——其实是父容器设置了 align-items: center 或 place-items: center，导致文本块被垂直居中，掩盖了行高效果；或者子元素用了 margin 替代 line-height 控制段间距，造成误判。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否含
align-items/justify-content类属性，临时注释掉看是否恢复预期行距 - 段落间间距统一用
margin-bottom，不要混用line-height控制段间距，后者只管单行内文字垂直空间 - 若用 CSS Grid 布局文章区域，确保文本容器未被设为
grid-area后又漏掉align-self重置
line-height 的数值本身没问题，问题出在它和 max-width、font-size 没形成协同节奏。 
