应使用无单位行高（如1.5）而非固定像素值，因其会随字号缩放；通过@font-size-base和@line-height-base统一基准，衍生变量用乘法计算，媒体查询中重定义基准变量实现响应式适配。
怎么用 Less 变量统一管字号和行高
直接用 @font-size-base 和 @line-height-base 作为基准变量，所有具体字号（@font-size-sm、@font-size-lg）都基于它们计算，而不是各自硬编码数值。这样改基准值，整套字体方案自动响应。
- 别写死
14px、1.42857这类散落的值，否则后期调整要满项目搜替换 - 推荐用乘法而非加减法定义衍生字号，比如
@font-size-sm: @font-size-base * 0.875;，语义清晰且缩放一致 - 行高建议统一用无单位数值（如
1.5），避免24px这种固定高度导致字号变大后行高塌陷
为什么行高必须用无单位数值
Less 编译时，line-height: 1.5 是相对当前 font-size 的倍数；而 line-height: 24px 是绝对值，一旦父元素字号变大，行高不会跟着撑开，文字会挤在一起甚至重叠。
- 常见错误现象：
.title { font-size: 20px; line-height: 24px; }→ 实际行高只有 24px，不够容纳 20px 字体+字间距 - 正确做法：定义
@line-height-md: 1.4;，然后line-height: @line-height-md; - 兼容性无影响，所有现代浏览器和 IE9+ 都支持无单位行高
如何让字体变量适配不同设备断点
不要在每个媒体查询里重复写一整套字体变量，而是用嵌套 + 变量重定义的方式局部覆盖。
- 基础变量写在顶层，比如
@font-size-base: 16px; - 在
@media (max-width: 768px)内直接重赋值：@font-size-base: 14px;，后续所有依赖它的变量自动按新基准计算 - 注意：Less 中变量作用域是“就近原则”，重定义必须在使用前、且在同一作用域块内生效
- 避免在 mixin 里动态算行高（如
line-height: @font-size-base * 1.4;），这会导致编译后冗余 CSS，不如直接用无单位行高
容易被忽略的字体继承陷阱
Less 变量本身不控制 CSS 继承行为，但设计字体方案时若忽略层级关系，编译出的 CSS 很容易出现意外继承或断裂。
- 比如全局设了
body { font-size: @font-size-base; }，但子元素用了em单位又没重置，会层层放大 - 推荐策略：根节点用
rem，配合html { font-size: @font-size-root; }控制基准，其他地方统一用rem或无单位行高 - 组件级字体配置（如按钮字号）应显式声明
font-size，不要依赖父级继承，否则换皮肤或嵌套时极易错乱
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
