Mixin动态计算行高因行高与字号强耦合，需按比例缩放；错误做法是单独设line-height媒体查询，正确做法是传入基准字号与行高，用公式unit(@base-line-height * (@current-size / @base-font-size), '')计算当前值，并用Less循环+映射实现多断点响应。
Less中用Mixin动态计算行高为什么必须结合font-size
行高不是独立可响应的属性，它和字号强耦合。直接给line-height写媒体查询会失控——比如小屏下font-size: 14px配line-height: 1.6还行，但大屏放大到font-size: 28px时，同样的line-height: 1.6就显得过松。真正需要的是“随字号等比缩放的视觉节奏”，所以Mixin必须把font-size和line-height当一组参数接收。
常见错误是只传line-height值，结果在不同断点下字号变了、行高却没按比例跟上，文字块出现挤压或漂浮感。
- 推荐传入基准字号（如
@base-font-size: 16px）和对应基准行高（如@base-line-height: 1.5） - Mixin内部用
unit(@base-line-height * (@current-size / @base-font-size), '')算出当前行高数值 - 避免用
em或rem单位硬写，它们在嵌套上下文中会叠加，导致不可控
如何写一个支持多断点的typography Mixin
别用一堆@media手写重复逻辑。Less的循环+映射结构更可靠：
.responsive-typography(@font-sizes, @line-heights) when (islist(@font-sizes)) {
.loop(@i: 1) when (@i =< length(@font-sizes)) {
@size: extract(@font-sizes, @i);
@lh: extract(@line-heights, @i);
@bp: extract(@breakpoints, @i);
<pre class="brush:php;toolbar:false;">@media (min-width: @bp) {
font-size: @size;
line-height: unit(@lh * (@size / 16px), '');
}
.loop(@i + 1);} .loop(); }
使用时只需定义断点数组：@breakpoints: 320px, 768px, 1024px；字号数组：@font-sizes: 14px, 16px, 18px；行高数组：@line-heights: 1.4, 1.5, 1.6。调用.responsive-typography(@font-sizes, @line-heights)即可生成完整响应式规则。
注意：数组长度必须一致，否则extract()会返回undefined，编译时报错Operation on an invalid type。
为什么不能直接用CSS clamp()替代这个Mixin
clamp()适合简单线性过渡，比如font-size: clamp(14px, 4vw, 28px)。但它无法表达“字号每增加2px，行高就+0.05”这类非线性节奏——而真实排版往往需要这种微调。Less Mixin的优势在于能引入业务逻辑：
- 对标题用
@title-ratio: 1.2，正文用@body-ratio: 1.6，分别控制紧致度 - 当
font-size 时，强制<code>line-height: 1.3防止过密 - 自动注入
margin-bottom为line-height * 0.8，保持段落呼吸感
这些判断在纯CSS里只能靠大量@container或JS补丁，而Less在编译期就完成，零运行时开销。
实际项目中容易漏掉的兼容性细节
旧版iOS Safari（calc()在line-height里的嵌套使用，比如line-height: calc(1.5 * (20px / 16px))会被忽略。解决方案是Mixin里加一层降级：
.type-h2 {
font-size: 20px;
line-height: 1.875; // fallback for old Safari
line-height: unit(1.5 * (20px / 16px), ''); // compiled to 1.875 anyway, but safe
}另一个坑是字体加载期间的FOIT/FOUT：如果Mixin生成的font-size和line-height在字体加载后突变，会造成页面跳动。建议配合@font-face的font-display: optional，并用size-adjust微调后备字体尺寸，让流式排版过渡更平滑。
最麻烦的其实是设计系统对接——设计师给的Sketch标注通常只有“小屏14/20、中屏16/24、大屏18/29”，那个29不是line-height值，而是px绝对值。得手动反算成29 / 18 = 1.611...再喂给Mixin，这里一不留神就失准。
