Less响应式布局需在编译期生成精准媒体查询，核心是规范断点变量（带单位、用@{}引用）、列宽用percentage(1/@n)保精度、媒体查询内嵌必用&绑定、表格隐藏用语义类+Mixin，并统一收敛逻辑。
Less 实现响应式布局不是靠运行时判断屏幕尺寸，而是靠编译期生成精确、可维护的 CSS 媒体查询规则。关键不在“怎么写@media”，而在“怎么组织变量、嵌套和计算逻辑”——写错一个单位或漏一个&，整条规则就静默失效。
断点变量必须带单位且用 @{} 引用
直接写 @media (min-width: @sm) 会编译失败或输出无效 CSS；必须写成 @media (min-width: @{sm})，但前提是 @sm 定义时已含单位：
-
@sm: 576px;✅ 正确，有单位 -
@sm: 576;❌ 错误，编译后变成@media (min-width: 576)，浏览器忽略 - 推荐用 map 统一管理：
@breakpoints: { xs: 0, sm: 576px, md: 768px, lg: 992px };，后续遍历更可控
列宽计算必须用 percentage(1 / @n)，别碰 calc()
calc(100% / 3) 在 Less 编译时就被算成 calc(33.333333%)，小数截断后 12 列加起来可能只有 99.999%，最后一列掉行。而 percentage(1 / @n) 返回字符串 "33.333333%"，让浏览器在运行时执行除法，精度保得住：
- 正确：
.col-@{n} { width: percentage(1 / @n); } - 错误：
width: calc(100% / @n);或width: (100% / @n); - Flex 场景下更推荐：
flex: 0 0 percentage(1 / @n);（flex-basis比width更可靠）
媒体查询内嵌必须用 & 显式绑定父选择器
嵌套写法里漏掉 &，会导致选择器拼接错误，整条规则被浏览器静默丢弃：
- ✅ 正确：
.card { @media (max-width: @{sm}) { & { display: block; } } }→ 编译为.card@media(...){.card{}} - ❌ 错误：
.card { @media (max-width: @{sm}) { display: block; } }→ 编译为.card@media(){display:block}（语法非法） - 子元素要继续嵌套，用
& ul而非ul，否则会脱离上下文
响应式表格隐藏列必须用语义类名 + .responsive-table Mixin
直接写 tr td:nth-child(3) { display: none } 看似简单，但加一列就全乱；用 .col-actions 这类语义类名，再配合参数化 Mixin，才能真正复用和维护：
- Mixin 示例：
.responsive-table(@bp, @hidden-cols) { @each @col in @hidden-cols { @{col} { visibility: hidden; width: 0; } } } - 调用：
.responsive-table(@sm, .col-actions, .col-status); - 必须用
visibility: hidden + width: 0，不用display: none，否则table-layout: fixed下列宽塌陷
最常被忽略的是：所有断点逻辑必须收敛到变量和 Mixin 中，而不是散落在各处的 @media 块里——改一个断点值，就得全局搜替换，漏一处就错位。这不是细节问题，是维护成本的分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
