Less不补前缀，column-count在旧版Safari、Chrome中因缺失-webkit-column-count等前缀而失效；需用Mixin封装并显式处理多列属性及配套参数，结合媒体查询实现响应式列数切换。
Less 本身不补前缀、不判断浏览器支持，column-count 这类属性在旧版 Safari、Chrome 里直接失效——不是你写错了，是编译后没加 -webkit-column-count 和 -moz-column-count。
为什么 column-count 在 iOS WebView 或旧 Chrome 里不生效
原生 CSS 多列属性从 CSS3 起就存在 vendor 分歧：column-count 在 Safari 5.1+、iOS 4.2+ 需要 -webkit-column-count；Firefox 3.5–15 需要 -moz-column-count；而 Less 默认只输出标准属性。Autoprefixer 对这类属性支持有限（尤其 column-gap、column-rule），且不会自动补 -webkit- 前缀到多列相关属性上。
- 常见错误现象：
column-count: 3;在 iOS 12 Safari 中完全被忽略，开发者工具里该声明被划掉 - 不要指望
@supports (column-count: 3)能兜住——IE11 和旧 Safari 根本不识别这个@supports块 -
break-inside: avoid在 Chrome 90+ 才稳定，旧版需配合display: inline-block+vertical-align: top手动对齐
用 Mixin 封装多列属性时必须显式处理的四项参数
只封装 column-count 是典型误区。实际项目中，column-width、column-gap、column-rule 几乎总是联动调整，且每项都需对应前缀。
-
@width参数默认设为auto，避免小屏下强制宽度导致列数异常（如column-width: 200px在 320px 宽屏幕里强行撑出 1 列） -
@gap必须同步输出-webkit-column-gap和column-gap，iOS 11.3+ 才原生支持column-gap -
@rule若设为1px solid #ccc，-moz-column-rule在 Firefox 60+ 已废弃，但内网系统仍可能跑在 FF 38 上，得保留 - 别漏掉
column-fill: balance—— Safari 14.1+ 才支持，旧版默认是auto，视觉差异明显
响应式列数切换不能靠 JS 变量动态算，得用媒体查询嵌套
Less 是编译时语言，round(@container-width / @col-min-width) 算出来的是常量，不是运行时值。所谓“自动计算”，本质是预设断点 + 变量重定义。
- 正确做法：在
@media (min-width: 768px)里重新赋值@cols: 2;，再统一调用.cols(@cols) - 避免在每个断点里重复写四组前缀——把媒体查询逻辑收进 Mixin，例如
.cols-responsive(@sm: 1, @md: 2, @lg: 3) - 注意
@width参数在不同断点下应保持一致（如始终用12rem），否则小屏列宽过大，内容溢出容器 - 如果用 Webpack + less-loader，确保
postcss-loader在less-loader之后执行，否则 Autoprefixer 压根没机会处理生成的 CSS
最容易被忽略的配套属性：break-inside 和 column-fill
写了 column-count 和 column-gap 还不够。图文混排时，图片或标题被硬生生劈成两半，问题往往出在 break-inside 没生效或被忽略。
-
break-inside: avoid在 Safari 12–13.1、Chrome 79–89 中行为不稳定，需额外加display: inline-block -
column-fill: balance在 IE11 和旧 Edge 中无效，且会触发渲染抖动，建议只在现代浏览器中启用 - 如果内容含
<iframe></iframe>或<canvas></canvas>，某些 Android WebView 会无视break-inside，只能靠 wrapper 层加overflow: hidden截断 - 别在 Mixin 里硬编码
column-fill: balance—— 改成可选参数.cols(@count, @fill: auto)，留出降级空间
真正麻烦的不是写几行前缀，而是同一份样式在 iOS WebView、旧版 Chrome、Firefox ESR 和 IE11 里要应对四套渲染逻辑。Mixins 只负责把前缀和参数组织清楚，兜底还得靠 @supports 块外层的手动降级或 JS 运行时检测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
