移动端报纸排版必须用column-width而非column-count，因后者固定列数导致小屏文字过窄、内容错乱；column-span: all兼容性差，标题应移出多列容器；图片浮动和首字下沉在多列中表现异常，需结构降级或替代方案。
移动端用 column-count 做报纸排版，基本不可行——列数固定会导致小屏文字挤成窄条、阅读体验极差，必须用 column-width 驱动响应式分列。
为什么不能直接写 column-count: 3？
在手机上硬设 3 列，浏览器会强行把内容切成三份，每列宽度可能只剩 100px 左右，段落被无意义截断，首行缩进错位，图片被劈成两半。这不是“报纸风”，是“撕纸风”。
-
column-count是定列数，不关心容器宽窄，只管切 -
column-width是定最小列宽，浏览器按需生成列数：宽屏出 3 列，窄屏自动退化为 1 列 - 移动端优先用
column-width，搭配column-gap和column-rule控制视觉节奏
column-span: all 在移动端的兼容性陷阱
标题横跨全列看似简单，但 column-span: all 在 Safari（iOS 16.4 之前）和部分 Android WebView 中不支持，且无法回退到 break-before: column 这类替代方案——它对 <h1></h1> 这类块级元素无效。
- 稳妥做法：把标题从多列容器中抽出来，单独作为
<header></header>放在.article外层 - 若坚持内嵌，需加前缀并降级：
-webkit-column-span: all+display: block+margin: 0 auto居中 - 时间栏同理，别塞进多列流里，否则在 iOS 上大概率被切成两行显示
图片浮动 + 首字下沉在多列流里的真实表现
多列布局本质是「文本流重排」，不是 Flex/Grid 那种盒子模型。所以 float: left 对图片无效——它只会让图片卡在当前列顶部，不触发跨列环绕；伪元素 ::first-letter 下沉也常因列断点错位而失效。
- 图片要左/右浮动效果，必须用
column-span: all包裹一层<figure></figure>，再在里面设float（但如前所述，兼容性差） - 更可靠的做法：放弃浮动，改用
shape-outside+float组合，但仅适用于单列上下文，多列中慎用 - 首字下沉建议用
display: inline-block+vertical-align: top模拟，避免依赖::first-letter在列拆分时的不稳定行为
真正难的不是写对属性，而是接受多列布局的边界：它只适合纯文本流，一旦混入图片、列表、不规则形状，就得拆结构、做降级、加媒体查询——报纸风不是靠一个 columns 属性撑起来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
