应使用无单位的 line-height 倍数（如 1.6）并封装为语义化 mixin，避免与 font-size 硬绑定；标题、正文、注释需不同行高比例；推荐用 clamp() 实现响应式字号；禁用全局 line-height 重置。
直接用 line-height 倍数，别乘 font-size
Less 里写 line-height: @fs * 1.5 看似聪明，实际会破坏排版一致性。标题、正文、注释需要的行高比例本就不一样——标题紧凑（1.2），正文舒展（1.6），小字注释得留点呼吸感（1.4）。硬绑定字体大小，等于把语义逻辑交给算术，后期改一个字号，所有行高全乱套。
正确做法是把行高当独立设计参数：用带默认值的 mixin 封装，比如 .line-height(@lh: 1.6)，调用时显式传参或走默认。纯数字单位（如 1.5）浏览器按倍数解析，完全符合 CSS 规范，也方便 rem 缩放时保持比例稳定。
.text-body() 这类语义 mixin 要按阅读顺序设参
参数顺序决定可维护性。没人先想行高再想字号，所以 .text-body(@fs: 16px, @lh: 1.6, @fw: 400) 是合理顺序。调用时可以只写 .text-body(18px)（后两个用默认），也可以全写 .text-body(14px, 1.4, 500)。Less 不支持命名参数，靠占位 + 默认值模拟，这是最贴近直觉的写法。
注意两点：
• 如果项目用 rem，@fs 建议传 1rem 而非 16px，避免根字体变化时行高计算脱节；
• 别在 mixin 里自动加 margin 或 color，排版 mixin 只管排版属性，其他交由更上层的组件 mixin 控制。
立即学习“前端免费学习笔记（深入）”；
响应式排版不能只靠媒体查询硬切
单纯在 @media (max-width: 768px) 里改 font-size 容易导致断层感——比如从 16px 突然跳到 14px，中间没过渡。现代方案是结合 clamp()：用 Less 变量生成带范围的 CSS 函数，例如 font-size: clamp(14px, 4vw, 18px)。
Less 本身不运行时计算 clamp，但你可以封装成 mixin：
• 允许传入最小值、基准值、最大值；
• 内部拼出 clamp(@min, @base, @max) 字符串（必须用 ~"" 包裹）；
• 注意单位一致性：三个值都得带单位，否则浏览器解析失败；
• 不要试图在 Less 里做 viewport 宽度判断——那是运行时逻辑，交给 CSS 原生 clamp 更轻量可靠。
全局重置 line-height 是陷阱
很多项目还在 html 或 body 上写 line-height: 1.5，指望一劳永逸。这会导致所有继承文字节点（包括 button、input、code）都被强制套用同一行高，而这些元素往往需要更紧凑的垂直节奏。
真正可持续的做法是「驱动式重置」：删掉全局 line-height，让每个文字容器显式调用 .line-height() 或 .text-body()。这样既保留控制权，又避免意外继承污染。复杂点在于：你需要在组件粒度上养成调用习惯，而不是依赖一次全局设置。
