移动端 line-height 失效主因是文本自动缩放、固定像素值锁定或 em 继承失控；应使用无单位数值（如 1.5）实现等比缩放，并配合 viewport、根字号策略及 -webkit-text-size-adjust 兜底，真机验证渲染一致性。
line-height 在移动端为什么经常失效
因为很多小屏幕设备默认启用「文本自动缩放」，或者父容器设置了 font-size 但没同步调整 line-height 的计算基准。更常见的是用了固定值（比如 line-height: 20px），而小屏下字体被系统强制放大，导致行高跟不上。
用 rem 或无单位数值重设行高才可靠
用像素值锁死 line-height 是最常踩的坑；应该让行高随字体等比缩放：
-
line-height: 1.5（推荐）—— 无单位，表示倍数，会随font-size自动缩放 -
line-height: 1.5rem—— 可用，但注意它依赖根元素font-size，若你用的是动态根字号（如 vw 方案），得确认 rem 基准是否稳定 - 避免
line-height: 24px或line-height: 1.2em（em 会继承、叠加，容易失控）
配合 viewport 和 font-size 做兜底
光调 line-height 不够，小屏上文字挤成一团，往往是因为整体字号太小或视口没对齐：
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且没被覆盖 - 如果用了
html { font-size: calc(16px + 0.25vw); }这类响应式根字号，要验证不同宽度下line-height实际渲染是否均匀（可用 Chrome DevTools 的 computed 面板看最终像素值） - 某些安卓 WebView 对小字号（如
font-size: 12px）会强制提升行高，此时加-webkit-text-size-adjust: 100%能抑制
检查 line-height 是否被其他样式覆盖
调试时发现行高没变？大概率是层叠顺序或继承搞错了：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具选中文字元素，看 computed 标签页里
line-height的来源，特别留意是不是从body或p等全局选择器继承来的 -
display: flex容器里的子元素，line-height对垂直居中无效，得用align-items: center或margin: auto - 表格单元格（
td）、按钮（button）等替换元素，line-height行为和普通块级元素不同，有时需配合vertical-align
