less中流式宽度计算全在编译期完成，需用percentage()、unit()等函数及括号除法，禁用calc()；单位须统一转换，响应式依赖@media而非运行时条件，容器须设box-sizing: border-box。
Less里不能靠calc()自动算出流式容器宽度，真正起作用的是编译期函数如percentage()、unit()和括号包裹的除法表达式；所有“自动”都发生在编译时，不是浏览器运行时。
用percentage()代替手写小数百分比
手写width: 8.33333333%;既难维护又易出错，而栅格系统常需按列数均分100%。Less的percentage()能在编译期直接输出精确值。
-
percentage(1 / 12)→8.33333333%，适合生成.col-1-of-12类 - 避免
100% / 12这种裸除法：Less默认不预计算，可能原样输出为100% / 12，浏览器不识别 - 若列数存于变量
@cols: 12，务必写成percentage(1 / @cols)，不能省略括号
unit()统一单位再参与运算
混用rem、px和%是流式宽度计算失败的主因。Less拒绝跨单位运算，必须显式转换单位。
- 间隙用
@gap: 16（纯数字），再通过unit(@gap, px)转为16px参与减法 - 错误写法：
width: (100% - @gap * 1px)——*不是单位转换操作符 - 正确组合：
width: (100% - unit(@gap, px))，确保左右单位可比 - 移动端慎用
rem参与百分比计算：根字体大小不确定时，1rem对应像素值浮动，会导致布局失准
响应式列宽切换必须靠媒体查询，不能依赖.when
Less的.when是编译期条件分支，无法响应屏幕宽度变化。所谓“根据视口自动切列数”，只能靠@media配合多套预设计算。
- 定义断点变量：
@bp-md: ~"(min-width: 768px)"; @bp-lg: ~"(min-width: 1200px)"; - 在每个断点内重写列宽：
@media @bp-md { width: percentage(1 / 2); }（2列） - 别试图用
& when (@screen > 768px)——Less没有运行时@screen变量，这行不通 - 容器必须设
box-sizing: border-box，否则padding会撑破你算好的percentage()宽度
流式容器的min-width/max-width不能用Less函数动态裁剪
想让容器“最小300px、最大1200px、中间随父级拉伸”，这不是Less该干的活。它只负责把变量原样塞进CSS属性，不参与运行时逻辑。
- 直接写：
width: 100%; min-width: @min-w; max-width: @max-w;，其中@min-w: 300px; @max-w: 1200px; - 禁用
min-width: max(@min-w, 10vw)：Less的max()只接受同单位数值，且10vw是运行时值，编译期无法比较 - 如果真要响应式约束，就在不同
@media里分别覆盖min-width和max-width值，而不是幻想一个函数能跨单位裁剪 - 最容易被忽略的是：这些限制必须加在块级容器自身上，若加在
flex子项或grid轨道里，得确认父容器是否已启用flex-wrap或grid-template-columns
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
