如何通过Less CSS构建跨平台的响应式布局？-css教程-PHP中文网

应避免在less中直接使用calc(100% / @n)，因其编译期预计算会产生高精度小数导致总和不足100%，引发布局换行；正确做法是用percentage()生成字符串宽度并配合递归mixin安全输出栅格类。

如何通过less css构建跨平台的响应式布局？

直接用 percentage() 配合递归 mixin 生成栅格类，比硬写 calc(100% / @n) 更可靠——后者在 Less 编译期会尝试预计算，产生带多位小数的字面量（如 calc(33.333333%)），浏览器渲染时截断导致 12 列加起来不足 100%，卡片意外换行。

为什么 `calc(100% / @n)` 在 Less 中不能用

Less 不是运行时引擎，它在编译阶段就要把表达式算出结果。当 @n 是变量（比如 @grid-columns: 12）时，旧版 Less 直接报错 “Operation on an invalid type”；新版即使能算，也会输出高精度小数，CSS 解析器不保证保留全部位数。更关键的是：百分比总和一旦低于 100%，Flex 或 float 容器就会触发换行，布局崩掉。

正确做法是让宽度值在编译期就固化为字符串：

@col-width: percentage(1 / @grid-columns); → 得到 "8.333333%"
再拼接：width: ~"(@{col-width} * @{span})"; → 输出 width: 25%;
gutter 留给浏览器 runtime 处理：margin-left: calc(var(--gutter, 1rem) / 2);

用递归 mixin 安全生成 `.col-1` 到 `.col-12`

Less 没有 @for，所谓“循环”本质是带守卫的递归调用。漏掉终止条件或参数传错，要么无限递归报错，要么只生成一个类。

标准写法必须包含三要素：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

守卫条件用 when (@n > 0)，不用 = 或 ，避免整数精度偏差导致死循环
每次递归显式传参：.make-col((@n - 1), @grid-columns)，不依赖外部变量
类名拼接用 .col-@{n}（花括号不可省），否则 .col-@n 会被解析成变量引用

入口调用写成 .make-col(@grid-columns, @grid-columns)，确保从最大列数开始生成。

断点与列数解耦，避免全局强耦合

把 @grid-columns: 12 写死在全局，改一个断点就得搜三遍文件。响应式栅格的核心是「每个断点拥有独立列数」：

定义断点变量：@bp-sm: 576px; @bp-md: 768px; @bp-lg: 992px;
按断点拆开列数：@grid-columns-sm: 4; @grid-columns-md: 8; @grid-columns-lg: 12;
用 .each()（Less 4.0+）遍历断点 map，内部再调一次列循环；别嵌套两层 .each()，旧版 Less 容易崩溃
媒体查询内重算宽度：@media (min-width: @bp-md) { .make-col(@grid-columns-md, @grid-columns-md); }