less中响应式媒体查询混合需手动封装，推荐用语义化mixin（如.when-sm）配合断点变量（@breakpoint-sm: 576px），统一用max-width实现移动优先，避免嵌套调用和单位传参，支持规则块参数以兼容嵌套选择器。
Less中怎么写响应式媒体查询混合（mixin）？
直接用 .media() 这类自定义 mixin 是最常用也最可控的方式。Less 本身不内置响应式 mixin，必须手动封装，否则每次写 @media (max-width: 768px) 都得重复敲，还容易漏括号或单位。
关键不是“能不能”，而是“怎么组织才不易出错”。建议把断点值抽成变量，再用 mixin 封装媒体查询逻辑，避免硬编码。
-
@breakpoint-sm: 576px、@breakpoint-md: 768px、@breakpoint-lg: 992px—— 用 px 更稳妥，避免 rem/vw 在部分浏览器中触发重排抖动 - mixin 名称要带语义，比如
.when-sm()比.mq1()可维护性强得多 - 不要在 mixin 里写具体样式，只包裹条件；样式规则仍写在调用处，保持关注点分离
为什么用 max-width 而不是 min-width 写移动端优先混合？
Less mixin 里用 max-width 更适合“移动优先 + 渐进增强”场景，尤其当你要覆盖某些组件在小屏下的默认行为时。比如按钮在手机上需要更小的 padding，但桌面端恢复常规尺寸 —— 这时用 .when-max(@breakpoint-md) 包裹小屏样式，比一堆 min-width 嵌套更清晰。
反例：用 min-width 写“仅桌面生效”的 mixin，若断点值没对齐（比如 @breakpoint-md 是 768px，但某处误写成 767px），会导致样式在 767–767.99px 区间失效，且极难排查。
- 统一用
max-width: (@breakpoint-md - 1)表达“小于中屏”，比手写767px更可靠 - 如果真需要“仅中屏及以上”，用
@media (min-width: @breakpoint-md)单独写，不塞进通用 mixin - 避免在 mixin 参数里传入带单位的值（如
.mq(768px)），Less 会报Operation on an invalid type
如何让媒体查询 mixin 支持嵌套选择器？
Less 的嵌套语法（&）在 mixin 内部默认不生效，直接写 &__item { ... } 会编译失败。必须用 selector-replace() 或显式拼接父选择器 —— 但 Less 原生不支持运行时 selector 操作，所以最稳的方式是让 mixin 接收选择器字符串作为参数。
例如定义：
.when-md(@rules) {
@media (min-width: @breakpoint-md) {
@rules();
}
}然后调用：.card {
width: 100%;
.when-md({
width: 50%;
&__header { font-size: 1.2em; }
});
}
- 必须用花括号包裹规则块（
{...}），不能传普通属性列表 - 如果嵌套层级深（如
.card > .list .item），建议把复杂选择器提到 mixin 外，只在内部写声明 - 别尝试用
~"..."拼接媒体查询字符串，Less 3.9+ 已废弃该用法，编译会警告
编译后 CSS 体积暴增？检查 mixin 是否被无意识递归调用
一个常见静默陷阱：在 .when-lg() 里又调用了 .when-md()，而 .when-md() 又反向调用了 .when-sm() —— Less 不报错，但会生成重复、嵌套多层的 @media 块，最终 CSS 文件可能翻倍。
验证方式很简单：编译后打开生成的 CSS，搜索 @media，看是否有类似 @media (min-width: 992px) { @media (min-width: 768px) { ... } } 的嵌套结构。出现即说明 mixin 调用链失控。
- 所有响应式 mixin 必须是扁平调用关系，禁止 A → B → A 类循环
- 用
//注释标明 mixin 用途，比如// 仅在 >=992px 生效，不兼容旧版 IE - 如果项目需兼容 IE11，避免在 mixin 中使用
calc()或aspect-ratio等新特性，它们不会被自动降级
实际项目里，最易被忽略的是断点值的维护一致性 —— 设计稿给的是 375 / 768 / 1440，但开发在 Less 变量里写了 320 / 768 / 1200，结果所有响应式逻辑都偏移。这点没法靠工具校验，只能靠团队约定和 PR 时人工核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
