less中需手动封装.columns() mixin添加-webkit-、-moz-前缀，因autoprefixer无法处理less变量计算；现代浏览器已原生支持column-count等属性，ie10/11仅伪支持且需前缀，ie9及以下完全不支持。
Less里怎么写多列布局的浏览器前缀混合？
Less本身不处理CSS前缀，它只是编译成CSS；真正要解决的是如何用.mixin封装column-count、column-gap等属性，并自动注入-webkit-和-moz-前缀。现代浏览器（Chrome 50+、Firefox 52+、Safari 10.1+）已原生支持多列，但IE10/11仍需-webkit-前缀（实际是伪支持），而IE9及以下完全不支持。
推荐直接定义一个.columns()混合，把核心属性和前缀都收进去：
.columns(@count: 3, @gap: 1em, @rule: none) {
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
<p>-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;</p><p>-webkit-column-rule: @rule;
-moz-column-rule: @rule;
column-rule: @rule;
}</p>
调用时：.columns(4, 1.2em, 1px solid #eee);
为什么不能只靠Autoprefixer？
如果你用Webpack/Vite等工具链，确实可以配Autoprefixer自动加前缀——但前提是输出的是纯CSS。一旦你用Less生成内联样式、动态计算列数（比如@count: round(@width / 200px);），Autoprefixer就无能为力了：它不解析Less变量，也不运行表达式。这时候混合必须手动覆盖前缀逻辑。
常见踩坑点：
- 漏掉
-moz-前缀：Firefox旧版（column-*依赖-moz-，仅-webkit-在Firefox里无效 - 把
column-width和column-count混用：两者互斥，同时设会导致行为不一致，尤其在Safari中 - 在Flex或Grid容器里嵌套多列：部分Android Webview（4.4）会忽略
column-*，需确认父元素display不是flex或grid
响应式列数怎么用Less变量控制？
别用媒体查询嵌套混合（容易编译出冗余CSS），而是用参数化混合 + 响应式断点变量：
@sm-columns: 1;
@md-columns: 2;
@lg-columns: 3;
<p>@media (min-width: 768px) {
.article-content { .columns(@md-columns); }
}
@media (min-width: 1200px) {
.article-content { .columns(@lg-columns); }
}</p>
注意：不要在.columns()内部写@media，否则每个调用都会重复输出媒体查询块。
更稳妥的做法是分离「列配置」和「应用时机」：
.columns-sm() { .columns(@sm-columns); }
.columns-md() { .columns(@md-columns); }
.columns-lg() { .columns(@lg-columns); }
<p>.article-content {
.columns-sm();
@media (min-width: 768px) { .columns-md(); }
@media (min-width: 1200px) { .columns-lg(); }
}</p>
IE10/11下多列内容错位怎么办？
IE10/11虽声明支持column-*，但对break-inside: avoid、column-fill: balance支持极差，常导致图片/标题被截断或列高严重不均。
临时缓解方案（加在混合末尾）：
.columns(@count, @gap, @rule) {
// ... 原有前缀代码
@supports not (column-count: 2) {
// IE fallback：退化为块级堆叠
& > * { break-inside: auto; }
}
}
但更实际的解法是检测document.documentMode后加载JS补丁，或者干脆用display: flex; flex-wrap: wrap;模拟列布局——Less混合只负责现代浏览器的干净输出。
多列布局真正的复杂点不在Less写法，而在内容语义与分栏算法的冲突：浏览器按块级元素自然流切分，遇到position: absolute或transform元素时行为不可控。写混合时留好@rule和@gap接口，比硬编码更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
