平板端必须单独调 column-count 是因为屏幕宽度波动大（769–1024px），固定 3 栏会导致窄屏栏过窄、宽屏留白多；需用媒体查询设 column-count: 2 并配 column-gap: 1.5rem，禁用 column-width，对 h2/h3/p 加 break-inside: avoid，column-gap 用 rem 单位，Tailwind 需手写媒体查询。
为什么平板端必须单独调 column-count，而不是直接写死 3 栏
平板屏幕宽度波动大（769–1024px），固定 column-count: 3 在窄平板（如 iPad mini）上会导致每栏过窄、字距拉伸、行高异常，阅读吃力；而宽平板（如 iPad Air）又可能撑不满，留白过多。浏览器不会自动降级——它只会强行塞进 3 栏，哪怕每栏只剩 80px 宽。
必须用媒体查询主动干预：
-
@media (min-width: 769px) and (max-width: 1024px)范围内设column-count: 2 - 同时配
column-gap: 1.5rem（比桌面端略小，避免窄屏下间隙过大） - 禁用
column-width—— 它在平板断点内与column-count混用会触发不可预测的列数降级
break-inside: avoid 必须加在段落和标题上，否则标题被劈成两半
平板竖屏时，内容流更长，h2、p 等块级元素极易被截断到两栏中间，造成“标题下半截出现在第二栏开头”这种视觉断裂。这不是 bug，是浏览器默认行为。
正确做法是显式约束子元素断行：
-
h2, h3, p { break-inside: avoid; }—— 防止任何段落或标题跨栏 - 若用 Tailwind，需手动加
break-inside-avoid类，不能只靠父容器columns-2 - 注意：
break-inside: avoid对inline元素无效，确保目标元素是块级（如没重写display）
column-gap 单位选 rem 而非 px，否则字体缩放时栏间距失衡
用户可能在系统设置里调大字体（尤其对中老年用户），px 固定值的 column-gap 不会随文本缩放，导致栏间空白变窄甚至消失；而 rem 基于根字体大小，能同步缩放。
实操建议：
- 统一用
column-gap: 1.25rem或1.5rem，别写20px - 配合
font-size: 100%重置根字号，避免用户代理样式干扰缩放基准 - 测试时手动在浏览器设置里开启「强制放大网页字体」，观察栏间距是否仍舒适
Tailwind 用户注意：md:columns-2 不生效，必须手写媒体查询
Tailwind 的响应式前缀（如 md:columns-2）对 columns 属性完全无效——v3.x 不支持该属性的断点编译，写了等于没写。
真实可用方案只有两种：
- 在
@layer utilities里定义.columns-2，再配合独立媒体查询重置：@media (min-width: 769px) and (max-width: 1024px) { .columns-2 { columns: 2; } } - 或直接放弃工具类，用原生 CSS 写：
article平板类 { column-count: 2; column-gap: 1.5rem; } - 切记：不要把
columns-2加在flex或grid容器上——display 值会覆盖多列行为，整块失效
平板端多栏排版真正的难点不在写几行 CSS，而在判断哪些元素必须防断行、哪些单位必须可缩放、以及如何绕过框架限制直触底层行为。这些细节不测真机、不调系统字体设置，很容易上线后才发现标题劈裂或间隙消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
