ex单位严格取当前字体的x-height（小写字母x的视觉高度），不随字号线性缩放，仅响应font-family和font-size的实际渲染结果；适用于vertical-align、line-height微调及字体敏感的padding，不适用于容器布局或响应式断点。
ex 单位不是“差不多等于字号一半”的经验估算，而是严格取当前字体的 x-height（小写字母 x 的视觉高度）。它不随字号线性缩放，也不受字体宽度影响，只响应字体族和 font-size 的实际渲染结果。用错地方时，它看起来像 em 的弱化版；用对地方时，它是唯一能稳定锚定文本垂直度量的单位。
什么时候该用 ex 而不是 em 或 px
核心判断依据：是否需要尺寸与「字母 x 的视觉中线位置」保持刚性对齐。
- ✅ 适合：
vertical-align配合内联图标/装饰符号对齐文字基线；line-height微调行内元素垂直留白；padding-top/padding-bottom做字体敏感的呼吸感间距 - ❌ 不适合：容器宽高、栅格布局、响应式断点——这些场景要的是可预测的缩放比例或视口关联，
ex的字体依赖性反而制造不确定性 - ⚠️ 注意：
ex在无衬线字体（如system-ui）中通常接近0.45em ~ 0.55em，但在某些手写体或装饰字体中可能低至0.3em，必须实测
ex 在 line-height 中的真实行为
line-height: 1.5ex 并不等于 “1.5 倍 x 高度的行高”，而是把行高基准设为 x-height，再乘以系数。这会导致行距压缩，尤其在大字号下易出现文字挤叠。
- 浏览器实际计算逻辑是：
line-height = (x-height) × 系数，而非基于 font-size 推导 - 常见误用：
line-height: 2ex想实现“两倍 x 高”，结果在font-size: 24px的Roboto下仅约21.6px，远小于常规line-height: 1.5（≈36px） - 推荐写法：仅在明确需绑定 x-height 的微调场景使用，例如
line-height: calc(1em + 0.2ex)补偿特定字体的下沉感
图标与文字垂直对齐时 ex 的实操技巧
当 vertical-align: middle 失效（比如图标偏高/偏低），ex 提供更可控的偏移锚点。
- 先用
font-size统一图标与文字尺寸，例如都设为1rem - 给图标加
vertical-align: -0.15ex或+0.1ex，比用px更稳定——换字体时无需重调 - 若图标是 SVG，确保其
viewBox垂直中心对齐 x-height 区域，否则ex偏移会失准 - 测试组合：
font-family: "Inter", system-ui;+font-size: 16px;下，1ex ≈ 7.2px；换成"Georgia"后升至≈ 8.6px
真正难的不是记住 ex 的定义，而是判断某个像素级对齐问题是否真的由 x-height 偏差导致——多数时候是字体度量未归一化或 SVG 坐标系未对齐，而不是单位选错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
