响应式断点必须集中定义于变量文件并带单位，封装为语义化mixin调用，容器宽度需与断点同步更新，避免构建配置覆盖导致静默失效。
直接用像素值写 @media 是短期省事、长期翻车的典型做法——改一个断点，全项目搜替换，漏一处就导致某段屏幕宽度下样式完全失效。
断点变量必须集中定义且带单位
所有断点值必须收口到单独文件（如 variables.less），用语义化变量名 + 明确单位声明：
-
@breakpoint-xs: 0;—— 必须写0，不是空或~"0"，否则 Mixin 判断会断裂 -
@breakpoint-sm: 576px;—— 单位px不可省略，@breakpoint-sm: "576px"是字符串，@media里直接编译失败 - 禁用
@screen-sm-min这类冗余后缀，Less 不支持变量名插值，@@{sm}-min或@{sm}-min都会报错 - 变量名要能自解释：
@breakpoint-lg比@bp3更可靠，协作时不用猜
用 .media-up() 和 .media-down() 封装基础媒体查询
裸写 @media (min-width: @breakpoint-md) 容易漏括号、写反逻辑、单位错位。封装成 Mixin 能固化语法结构：
-
.media-up(@bp) when (isnumber(@bp)) { @media (min-width: @bp) { @content(); } }——when (isnumber(...))防止传入未定义变量导致编译崩溃 - 调用时直接
.media-up(@breakpoint-md) { color: red; }，比手写少敲 12+ 字符，且语义清晰 - 别写
.media-up-md()这类强绑定 Mixin，它把断点和尺寸耦死，违背“变量集中管理”原则 - 区间断点（如“仅在平板”）必须显式写两个条件：
@media (min-width: @breakpoint-md) and (max-width: (@breakpoint-lg - 1px))，括号和单位缺一不可
容器宽度与断点变量必须同步更新
改了 @breakpoint-lg: 992px，但忘了同步 @container-max-widths 里的对应值，就会出现容器突然撑破或留白异常：
-
@container-max-widths: { sm: 540px; md: 720px; lg: 960px; xl: 1140px; };—— 这个 map 的每个值必须 ≤ 对应断点，否则小屏下容器反而比断点宽，@media失效 - 取值必须用
map-get(@container-max-widths, sm)，不能手写540px，否则变量改了这里就成了硬编码黑洞 - Webpack 项目中如果用了
less-loader的modifyVars注入主题色，它可能意外覆盖你本地定义的@breakpoint-*变量，导致断点错乱 —— 这是编译期最隐蔽的坑
真正难的不是写对第一个 @media，而是确保所有断点变量、容器宽度、Mixin 调用、构建配置在编译那一刻保持一致；任何一处脱节，都会让响应式逻辑在某个精确的像素宽度上静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
