小屏下 column-count 错位需用媒体查询重置为单列：@media (max-width: 768px) { .article-content { column-count: 1; column-gap: 0; } }，并为图片、引用块等添加 break-inside: avoid 防断裂。
小屏下 column-count 错位的常见表现
用 column-count 或 column-width 做多列布局时，小屏（尤其是手机竖屏）常出现文字挤成一列但列间隙错乱、最后一列高度塌陷、图片或块级元素被截断在列边界、甚至整块内容横向溢出。这不是 bug，而是多列布局默认不处理响应式断点，column-count: 3 在 320px 宽度下仍强行分三列，每列只剩约 80px，内容被迫换行、撑高、错位。
必须用媒体查询重置列数
不能只靠 column-width 自适应——它只设最小宽度，不阻止过窄时强行分列。必须显式覆盖小屏下的 column-count 值：
@media (max-width: 768px) {
.article-content {
column-count: 1;
column-gap: 0;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.article-content {
column-count: 2;
}
}
-
column-count: 1是小屏安全底线，避免所有错位根源 - 务必同时设
column-gap: 0，否则默认1em会在单列时造成左侧空白 - 不要依赖
column-width单独控制，它和column-count冲突时行为不可控
图片和子容器在多列中容易断裂
break-inside: avoid 必须加在可能跨列的内容块上，否则图片、卡片、引用块会被硬生生切成两半：
.article-content img,
.article-content blockquote,
.article-content .card {
break-inside: avoid;
}
- 仅对块级元素生效，
inline元素（如span）加了也无效 - 部分旧版 Safari 需要
-webkit-column-break-inside: avoid - 如果子容器本身用了
display: flex或grid，break-inside可能失效，此时应改用单列布局
移动端滚动体验差的本质原因
多列布局在小屏强制横向滚动（因列间间隙+内容宽度总和超视口），根本不是样式问题，而是设计误用。CSS 多列本质为「印刷排版」服务，适合长文本阅读（如报纸），不适合交互型页面。
立即学习“前端免费学习笔记（深入）”；
- 用户手指滑动是纵向的，但多列让内容横向延展，触发非预期的
overflow-x: auto - 即使加了
overflow-x: hidden，也会导致右侧内容被裁切，且无法通过手势恢复 - 真正该做的是：小屏退化为单列流式布局，大屏才启用多列——这不是妥协，是回归语义
最易被忽略的一点：别在 body 或全站容器上直接写 column-count，它会污染所有后代。永远限定到具体语义容器（如 .article-text），否则调试时连错在哪都找不到。
