移动端应禁用多列布局以保障可读性，通过媒体查询将column-count设为1、column-gap设为0、column-rule设为none，或直接使用columns: auto彻底回归单列流式排版。
移动端屏幕窄，css多列布局（column-count 或 columns）容易导致每列过窄、字距异常、断词生硬，阅读体验差。最直接有效的办法，就是在小屏幕下用媒体查询关闭多列，回归单列流式排版。
用媒体查询禁用多列布局
在 CSS 中，针对移动设备宽度（如 max-width: 768px），重置 column 相关属性为默认值即可：
-
column-count: auto或1（强制单列） -
column-gap: 0（消除列间距） -
column-rule: none（隐藏分隔线）
示例：
.text-content {
column-count: 3;
column-gap: 2rem;
}
@media (max-width: 768px) {
.text-content {
column-count: 1;
column-gap: 0;
column-rule: none;
}
}
补充：避免小屏下文字被强制截断
多列常配合 break-inside: avoid 防止单个块元素跨列，但移动端单列后该规则反而可能导致空白或错位。建议在媒体查询中一并重置：
立即学习“前端免费学习笔记（深入）”；
- 移除或设为
break-inside: auto - 对
h2、p、figure等子元素可加break-after: auto保证自然分段
更稳妥的写法：用 columns 简写 + 回退
推荐优先使用 columns 简写属性，并在媒体查询中用 columns: auto 彻底解除多列控制：
@media (max-width: 480px) {
.article-body {
columns: auto;
}
}
columns: auto 等效于 column-count: auto; column-width: auto，浏览器会忽略所有列计算，回归标准文档流。
基本上就这些 —— 关键不是“怎么实现多列”，而是“什么时候该关掉它”。移动端优先单列，是可读性的底线。