移动端 columns 失效的根本原因是容器被 flex/grid 包裹或设了 height/overflow:hidden，破坏了多列所需的块级流；应优先用 column-width 而非 column-count，并配合 break-inside: avoid、column-span: all 等显式控制。
加 columns 却只在桌面生效、移动端还是一整块堆着？不是媒体查询没写，而是 column 行为本身在小屏上就容易失效——column-width 比 column-count 更适合移动端，但必须配合高度、流式上下文和断行控制才能真正“高效”。
为什么移动端加了 columns: 2 还是单栏？
根本原因是：移动端容器常被 flex 或 grid 父级包裹，或自身设了 height / overflow: hidden，直接废掉多列布局的块级流前提。浏览器看到的是“无法形成连续文本流”的容器，干脆跳过分栏逻辑。
- 检查父级是否用了
display: flex或display: grid→ 多列布局完全禁用，得把多栏容器单独提一层 - 确认容器没设
height或max-height→ 分栏需要内容自然撑高，硬限高会让后续栏被截断 - 临时加
border: 1px solid red查看容器实际渲染高度，常见问题就是高度为0（比如子元素全float或position: absolute）
column-width 是移动端唯一靠谱的选择
column-count 在手机上强行分 2 栏，往往导致每栏只有 120px 宽，字挤成一团；而 column-width: 16rem 让浏览器自己决定：窄屏时 1 栏，≥480px 自动变 2 栏，≥768px 可能变 3 栏——这才是响应式本质。
- 别写
columns: 2 16rem这种简写，它会触发浏览器优先满足column-width，但column-count的“2”只是建议值，实际可能被忽略 - 用
column-width: 16rem+column-gap: 1rem，再配合font-size: clamp(1rem, 4vw, 1.125rem)，行宽始终落在 45–75 字符舒适区间 - 安卓 Chrome 和 Safari 对
column-width支持稳定，但 iOS 16.4+ 才修复了column-span: all在 flex 容器里的兼容性问题
标题劈开、图片错位、段落孤行怎么救？
移动端触控阅读对视觉连贯性更敏感，机械切分带来的断裂感会被放大。必须显式干预，不能依赖默认行为。
- 标题防劈：
h2, h3 { break-inside: avoid; }（iOS Safari 支持良好，IE 已淘汰不用管） - 段落保形：
p { orphans: 2; widows: 2; }，移动端屏幕窄，3容易导致换栏失败，2更稳妥 - 图片跨栏：
figure { column-span: all; display: block; }，注意figure不能是flex子项，否则column-span失效 - 中文不断字：
word-break: keep-all; overflow-wrap: normal;，hyphens: auto对中文无效，别白费劲
column-gap 和 column-fill 在移动端的真实影响
column-gap 的像素值会从容器总宽里硬扣，小屏下这点损耗很致命。比如宽度 375px 的 iPhone，设 column-count: 2 + column-gap: 20px，两栏实际只剩约 167px —— 比一行文字还窄。
- 用相对单位：
column-gap: 1.25rem或column-gap: 3vw，比固定px更适应不同设备 -
column-fill: balance在移动端反而有害：它强制等高，可能导致首栏留大片空白；小屏应设column-fill: auto，让内容顺序填满 - 别加
column-rule，那 1px 边框会额外吃掉宽度，且在高 DPR 屏上模糊；真要分隔线，用伪元素::after绝对定位更可控
最常被忽略的点是：移动端多栏不是“设个属性就完事”，它依赖容器有真实高度、内容是纯块级流、且所有干预样式（break-inside、column-span）都得在移动端 CSS 里显式重申——媒体查询里漏掉任意一条，就可能让整段排版垮掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
