line-height 无法仅靠媒体查询实现真正动态响应，需用 clamp() 结合 vw 或 calc() 实现平滑缩放，并与 font-size 协同变化；在 flex/grid 中 line-height 易失效，应改用 align-items 或 justify-content 垂直居中。
line-height 不能直接用媒体查询做“动态”响应
很多人以为给 line-height 写一堆 @media 就算响应式了，其实这不算“动态适配”——它只是离散断点切换，屏幕宽度在两个断点之间时，行高还是固定值，视觉节奏会突兀。真要平滑变化，得靠 CSS 计算能力。
用 clamp() 实现连续、可伸缩的 line-height
clamp() 是目前最实用的方案：它能定义最小值、首选值、最大值，并在视口宽度变化时自动插值。关键在于把首选值设为一个带 vw 单位的表达式，让行高随宽度线性变化。
常见错误现象：clamp(1.2, 2.5vw, 2.0) 看似合理，但 2.5vw 在小屏下可能小于 1.2，导致实际取到 1.2，失去响应意义；大屏下又可能远超 2.0，被截断成 2.0，中间段没生效。
- 正确做法是让中间项随视口宽度从最小值平滑过渡到最大值，例如：
clamp(1.4, 1.4 + 0.02 * 100vw, 2.0)—— 但 CSS 不支持乘法运算，得换思路 - 更稳妥写法：
clamp(1.4, 1.6 + 0.01 * (100vw - 320px), 2.0)还是不行，CSS 里不能写算术表达式 - 所以实际用：
clamp(1.4, 1.6vw + 1.2, 2.0)（注意单位混用需谨慎）→ 更推荐：clamp(1.4, calc(1.4 + 0.02 * (100vw - 320px)), 2.0)，但calc()在clamp()中支持度有限（Chrome 119+、Safari 16.4+ 可用） - 兼容性兜底：先写
line-height: 1.6;，再覆盖line-height: clamp(1.4, 1.6, 2.0);没用，必须用支持clamp()的浏览器才生效
推荐实操写法（兼顾可用性与渐进增强）：
h1 {
line-height: 1.5;
line-height: clamp(1.3, 4vw, 2.0);
}
这里 4vw 是核心：在 320px 屏上是 12.8，显然太大，所以必须加最小值限制；clamp(1.3, 4vw, 2.0) 实际效果是「320px 时取 1.3，750px 时 4vw=30 → 被截为 2.0，中间平滑过渡」——但数值需按设计稿调整。
font-size 和 line-height 要协同缩放，否则行高会“飘”
只调 line-height 不动 font-size，文字变小后行高却还按大字号逻辑算，行距会显得过松；反之亦然。真实排版中，二者应同向响应。
- 最佳实践：用
rem或em基准，配合根字体动态缩放，让line-height的无单位值自然生效 - 例如：
html { font-size: clamp(14px, 2.5vw, 18px); }，然后p { font-size: 1rem; line-height: 1.6; }—— 此时line-height是相对于当前font-size的倍数，天然响应 - 避免用
px或em设line-height值（如line-height: 24px），它会脱离字体大小独立变化，破坏基线对齐 - 注意：某些字体（如中文黑体）在小字号下需要略大的
line-height（比如 1.7）才能保证字怀不粘连，这不是 bug，是渲染特性
line-height 在 flex / grid 容器中容易被意外重置
当文字放在 display: flex 或 display: grid 的容器里，且子元素是 inline 或未设高度时，line-height 可能失效或表现异常——尤其在垂直居中场景下，开发者常误以为是行高没起作用。
- 典型错误：给父容器设
line-height: 2想让单行文字垂直居中，但父容器是flex，此时line-height对齐逻辑被忽略 - 真正起效的是
align-items: center（flex）或place-items: center（grid） - 如果坚持用
line-height垂直居中，请确保父容器是块级且无 flex/grid 布局，同时高度固定 - 多行文本 + flex 容器？别依赖
line-height，改用display: flex; flex-direction: column; justify-content: center;
复杂点在于：行高响应不是孤立属性，它和字体加载、字体度量、甚至系统字体回退都有关联。比如用户禁用了网页字体，回退到系统默认中文字体，line-height: 1.5 在 macOS 和 Windows 下渲染出的实际行距可能差 2–3px —— 这没法用 CSS 完全抹平，只能靠设计预留弹性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
