less变量定义断点时px值写死后媒体查询不生效，因编译仅文本替换，@screen-sm无单位导致@media语法无效；应统一用数字定义变量（如@screen-sm: 768），配合unit(@screen-sm, px)或.to-rem()函数生成单位。
Less变量定义断点时，为什么px值写死后媒体查询不生效？
因为Less编译时变量只是文本替换，@media里直接写@screen-sm不会自动加单位，漏掉px就变成@media (min-width: 768)——浏览器认为这是无效语法，整条规则被丢弃。
- 必须显式拼单位：
@media (min-width: @screen-sm + px)，不能只写@screen-sm - 推荐统一用
unit()函数包裹：@media (min-width: unit(@screen-sm, px))，避免手误 - 断点变量建议全用数字（无单位）定义，比如
@screen-sm: 768，后续所有地方都靠unit()或手动拼接，保持源头干净
如何让同一套Less变量同时适配rem和px两种响应逻辑？
不能靠条件编译，Less没有运行时分支；得靠“变量+函数”组合出两套输出路径。核心是把单位转换逻辑抽成函数，而不是在每个@media里重复判断。
- 定义基础像素值：
@breakpoint-sm: 768，不带单位 - 写一个转换函数：
.to-rem(@px) { @rem: unit(@px / 16, rem); }（假设根字体16px） - 需要px时直接
@breakpoint-sm + px，需要rem时调.to-rem(@breakpoint-sm)并引用@rem - 注意：Less函数不能返回值，所以
.to-rem得配合.mixin用，实际用时写.to-rem(768); @media (min-width: @rem) { ... }
用@import组织断点文件时，为什么修改breakpoints.less后CSS没更新？
Less本身不追踪@import依赖链，构建工具（如webpack的less-loader、gulp-less）若没配置paths或modifyVars，可能缓存了旧编译结果，或者根本没监听到被导入文件的变化。
- 确认构建工具是否启用
watch且包含.less后缀，尤其检查是否忽略了node_modules外的@import路径 - 避免用相对路径
@import "../config/breakpoints.less"，改用别名：@import "~@styles/config/breakpoints.less"，并配好loader的paths - 如果用
modifyVars动态注入变量，断点就不能放@import里——它会被覆盖，必须写在modifyVars对象内
移动端横屏检测该不该放进Less断点变量？
不该。Less变量只能处理静态、编译期已知的尺寸，而横屏是运行时设备方向变化触发的，CSS媒体查询虽支持orientation，但和断点变量不是同一层机制。
-
@media (orientation: landscape)必须独立写，不能和@screen-md混在同一个@media里做逻辑合并 - 想复用断点数值？可以提取为变量，但媒体查询本身要另起一行：
@media (min-width: @screen-md + px) and (orientation: landscape) { ... } - 注意兼容性：
orientation在iOS Safari上对iPad桌面模式支持不稳定，单纯靠Less变量无法兜底
@screen-lg却忘了同步更新文档里的设计稿标注，或者在JS里硬编码768去判断宽度——变量只管CSS层，跨技术栈的约定得靠协作卡住。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
