怎样在Less中实现流式布局的CSS计算_利用百分比函数优化容器宽度

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