Less 中动态高度需用 calc() 配合 CSS 变量实现，确保单位统一、空格合规、变量括号包裹；媒体查询应切换预定义变量而非重赋值；iOS Safari 中宜用 JS 注入 --dynamic-vh 替代 100vh 并设 fallback；Less 函数如 percentage() 仅编译期静态计算，无法响应式。
用 calc() 配合 CSS 变量实现动态高度计算
Less 本身不支持运行时计算高度，真正起作用的是浏览器解析后的 calc()。Less 只负责在编译期拼出合法的 CSS 表达式，所以必须确保传入 calc() 的单位一致、括号完整、空格合规。
常见错误是直接写 height: calc(@base-height - 20); —— 缺少单位会导致整个声明失效，浏览器会静默丢弃该行。
- 所有数值必须带单位：比如
@base-height应为100vh或600px，不能是纯数字 -
calc()内部加减运算符前后必须有空格：calc(100vh - 20px)✅，calc(100vh-20px)❌ - Less 变量需用括号包裹再参与计算：
calc(@base-height - @header-height)→ 编译后是calc(100vh - 64px)
响应式高度适配不同屏幕的关键是媒体查询 + 变量覆盖
Less 的变量作用域是静态的，无法在媒体查询里“重定义”已声明变量。正确做法是用嵌套 + !default 或提前定义多套变量，再通过媒体查询切换生效值。
例如，想让容器在小屏取 80vh、大屏取 90vh，不能写：
立即学习“前端免费学习笔记（深入）”；
@container-height: 80vh;
@media (min-width: 768px) {
@container-height: 90vh; // ❌ Less 不允许在 media 中重新赋值变量
}应改为：
@container-height-sm: 80vh;
@container-height-lg: 90vh;
<p>.container {
height: @container-height-sm;
@media (min-width: 768px) {
height: @container-height-lg;
}
}避免 viewport 单位在 iOS Safari 中的滚动错位问题
用 100vh 做高度基准在 iOS Safari 上容易因地址栏收放导致容器高度跳变——浏览器把 vh 算成初始视口高，但滚动后地址栏隐藏，实际可视区域变大，而 CSS 不重算。
更稳的替代方案是用 JS 注入一个 CSS 变量，再在 Less 中引用它：
:root {
--dynamic-vh: 100vh;
}
// JS 运行时更新：
// document.documentElement.style.setProperty('--dynamic-vh', `${window.innerHeight}px`);
然后在 Less 中这样用：
.container {
height: calc(var(--dynamic-vh, 100vh) - @header-height);
}- 务必提供
100vh作为 fallback，防止 JS 未执行时样式崩塌 -
var(--dynamic-vh)必须用calc()包一层才能参与运算，直接写height: var(--dynamic-vh)无法和其它长度做加减
慎用 Less 函数如 percentage() 或 unit() 处理高度
Less 提供的 percentage()、unit() 等函数只在编译期运行，无法响应屏幕尺寸变化。它们适合生成固定比例值（如将 0.5 转成 50%），但不适合做运行时响应逻辑。
典型误用：
@ratio: 0.8;
.container {
height: percentage(@ratio); // 编译后就是 80%，完全静态
}这种写法和写死 80% 没区别，和“响应式”无关。真要基于父容器百分比缩放，直接用 height: 80% 更清晰；若需动态比例，必须靠 JS 或 CSS 自定义属性驱动。
真正复杂的响应式高度逻辑，往往绕不开 JS 监听 resize 或 orientationchange，Less 只能做好静态表达式的组织工作。别指望它替你做运行时决策。
