直接写@media会让断点维护变困难，因数值散落各文件、拼写易错、设计变更需全局搜索替换；应统一用语义化变量（如@breakpoint-md: 768px）集中管理，并通过.media(@breakpoint) Mixin复用逻辑，实现“改一处、全生效”。
为什么直接写 @media 会让断点维护变困难
当你在多个 Less 文件里反复手写 @media (min-width: 768px)、@media (max-width: 1023px)，很快就会遇到三类问题：拼写不一致（比如 min-wdith）、数值散落难统一（某处写 768px，另一处写 767.98px）、新增设备尺寸时要全局搜索替换。更麻烦的是，设计稿改了断点值，你得翻遍所有 .less 文件手动改。
核心不是“能不能用”，而是“改一次，全生效”——这需要把断点数值抽成变量，并让媒体查询逻辑复用。
如何定义可维护的断点变量 + 基础 .media Mixin
先在全局变量文件（如 variables.less）里集中声明断点值：
@breakpoint-xs: 0;
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;
@breakpoint-xxl: 1400px;
再写一个基础 Mixin，支持常见断点别名和方向：
.media(@breakpoint, @direction: min) when (@direction = min) {
@media (min-width: @@breakpoint) {
@arguments: ~"@{arguments}";
@content();
}
}
.media(@breakpoint, @direction: max) when (@direction = max) {
@media (max-width: @@breakpoint) {
@content();
}
}
注意：@@breakpoint 是 Less 的「变量插值」语法，表示取变量名对应的值；@content() 允许调用时传入样式块。
怎么用 Mixin 实现「移动优先」和「桌面优先」两种写法
移动优先是主流做法，靠 min-width 逐级增强：
- 用
.media(@breakpoint-md) 表示「≥768px 时生效」，等价于 @media (min-width: 768px)
- 组合写法如
.media(@breakpoint-md) and .media(@breakpoint-xl, max) 要拆成嵌套，不能连写——Less 不支持原生 and 连接多个 @media，必须手动嵌套：
.media(@breakpoint-md) {
.media(@breakpoint-xl, max) {
// 768px ≤ width ≤ 1200px 的样式
}
}
.media(@breakpoint-md) 表示「≥768px 时生效」，等价于 @media (min-width: 768px)
.media(@breakpoint-md) and .media(@breakpoint-xl, max) 要拆成嵌套，不能连写——Less 不支持原生 and 连接多个 @media，必须手动嵌套：桌面优先则常用 max-width 回退：
-
.media(@breakpoint-sm, max)表示「≤576px」，适合写移动端专属样式 - 避免混用
min和max在同一层级，否则生成的 CSS 媒体查询会嵌套过深，影响可读性
容易被忽略的兼容性与编译陷阱
- Less 3.10+ 才完整支持
@content 和带条件的 Mixin；若用老版本（如 2.x），@content 会报错，需降级为固定参数形式
- 断点变量名别用
@screen-sm 这类 Bootstrap 风格命名——容易和框架冲突；推荐语义化前缀如 @breakpoint-
- 不要在 Mixin 里硬编码单位（如
px），全部交给变量控制；否则换 Rem 或 em 断点时要重写 Mixin
- VS Code 的 Less 插件可能无法高亮嵌套
@media，但不影响编译；真正要检查的是最终输出 CSS 是否结构正确
@content 和带条件的 Mixin；若用老版本（如 2.x），@content 会报错，需降级为固定参数形式@screen-sm 这类 Bootstrap 风格命名——容易和框架冲突；推荐语义化前缀如 @breakpoint-
px），全部交给变量控制；否则换 Rem 或 em 断点时要重写 Mixin@media，但不影响编译；真正要检查的是最终输出 CSS 是否结构正确最常漏掉的一点：断点值本身要不要加 1px 避免边界重叠？比如 @breakpoint-md: 768px 和 @breakpoint-lg: 992px 之间留空档，还是直接设 767.98px？答案是——取决于设计规范，但一旦选定就必须全局统一，Mixin 只负责执行，不替你做这个决策。
立即学习“前端免费学习笔记（深入）”；
