断点变量须集中定义于\_variables.less文件，媒体查询混合需支持min/max双向参数并避免断点重叠，嵌套时必须用&显式绑定父选择器，遵循移动优先原则，基础样式不写媒体查询仅覆盖。
断点变量必须集中定义在独立文件里
硬编码 @media (max-width: 768px) 这类写法在多个文件中出现，后期改一个尺寸就得全局搜索替换，极易漏改或误改。正确做法是把所有断点抽成变量，统一放在 _variables.less 中：
-
@screen-xs: 480px;—— 手机横屏临界点 -
@screen-sm: 768px;—— 平板竖屏起始点（常用最小桌面断点） -
@screen-md: 992px;—— 平板横屏/小桌面 -
@screen-lg: 1200px;—— 大桌面标准宽度
所有组件、布局、卡片等样式文件都 @import "_variables.less";，不直接写数值。这样改 @screen-sm 就自动同步到导航栏、轮播图、表单等所有用到它的地方。
媒体查询混合必须支持 min/max 双向参数
只封装 .media-sm() 这种固定断点的 mixin 是懒办法，实际项目需要区间控制（比如「仅在平板横屏到小桌面之间生效」），所以混合函数得支持可选的 @max-width：
.media-query(@min-width, @max-width: null) {
@media-query: ~"(min-width: @{min-width})";
&when (@max-width is not null) {
@media-query: ~"@{media-query} and (max-width: @{max-width})";
}
@media @media-query {
@content();
}
}
使用时：
-
.media-query(@screen-sm) { ... }→ 对应@media (min-width: 768px) -
.media-query(@screen-md, @screen-lg - 1) { ... }→ 对应@media (min-width: 992px) and (max-width: 1199px)
注意：减 1 是为避免相邻断点重叠触发双重样式，这是真实项目里被忽略最多的一处细节。
嵌套媒体查询必须显式用 & 绑定父选择器
Less 不会自动补全父选择器，写错就编译出无效 CSS。例如：
.nav {
@media (max-width: 768px) {
display: none; // ❌ 编译后变成 @media (max-width: 768px) { display: none; } —— 没有选择器，浏览器直接丢弃
}
}
正确写法必须加 &：
.nav {
@media (max-width: 768px) {
& { display: none; } // ✅ 编译为 @media (max-width: 768px) { .nav { display: none; } }
}
}
子元素也一样：& ul 而不是 .nav ul，否则会生成冗余选择器链，影响 specificity 和维护性。
移动端优先时，基础样式不写媒体查询，只覆盖
很多人一上来就给每个模块写 @media (min-width: 768px)，结果基础样式反而没定义，页面在手机上空白或错乱。Less 的响应式逻辑本质是「移动优先 + 渐进增强」：
- 所有组件默认按手机尺寸写（无 media 查询）
- 用
.media-query(@screen-sm)开始写平板及以上适配 - 避免在同一个选择器里混用
max-width和min-width查询，容易互相覆盖
比如导航栏折叠逻辑，先写 .nav { display: flex; }，再在 @screen-xs 下用 & { display: none; } 隐藏，而不是反着来。这种顺序一旦写反，调试时会花大量时间排查「为什么手机上没显示」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
