column-count 在小屏幕下不生效，因浏览器优先按 column-width 计算列数，默认 auto 导致仅一列；须显式设置 column-width 才能使 column-count 生效。
column-count 在小屏幕下不生效？检查是否漏了 column-width
单纯设
在移动端常失效，因为浏览器会优先按
自动算列数，而后者默认是 auto，导致列宽撑满容器、实际只有一列。
必须显式设置
（比如
），才能让
在媒体查询中真正起作用
是“最多列数”，不是“固定列数”；实际列数由内容宽度 +
+
共同决定
若内容太短，即使设了
，也可能只出一列——这不是 bug，是规范行为
Media Queries 中 column-count 切换卡顿或闪屏？加 will-change 提前提示
列数突变时，浏览器要重排内容流，尤其文本多时容易卡顿或出现短暂单列/错位。这不是 JS 控制问题，而是 CSS 渲染机制本身有延迟。
在触发列切换的容器上加
，让浏览器提前分配渲染资源
避免在
里直接改
，改用
驱动更平滑（例如从
→
）
慎用
，它在动态切换时可能引发回流重绘，小屏下建议设为
Flex/Grid 布局里嵌套 columns 导致子项错位？别混用 display 类型
如果父容器是
或
，再给子元素设
，列布局大概率失效——CSS 多列是块级格式化上下文（BFC）特性，与 Flex/Grid 的主轴对齐逻辑冲突。
多列必须作用于
或
元素，且不能是 Flex/Grid 容器的直接子项
正确做法：外层用 Flex/Grid 控制整体结构，内部用一个
column-countcolumn-widthcolumn-widthcolumn-width: 150pxcolumn-countcolumn-countcolumn-widthcolumn-gapcolumn-count: 3will-change: column-count@media (max-width: 768px)column-countcolumn-widthcolumn-width: 280px180pxcolumn-fill: balanceautodisplay: flexdisplay: gridcolumn-countdisplay: blockdisplay: inline-block
包住文本内容，再对这个 div 设列属性
注意
break-inside: avoid
对 flex item 无效，想防止段落被断开，得加在段落自身上，而不是父 flex 容器
IE11 和 Safari 旧版 column-count 行为不一致？用 -webkit-column-count 兜底但别依赖
IE11 支持
column-count
但不支持
column-span: all
；Safari 12 之前对
column-rule
渲染有偏移；iOS Safari 在 zoom 缩放时列高计算异常。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
必须写双前缀：
-webkit-column-count
和
column-count
，顺序不能反（否则 WebKit 内核可能忽略标准属性）
不要指望
column-fill: balance
在 Safari ≤13.1 下准确工作，它常把最后一列拉得特别长
测试时务必真机打开 iOS Safari，模拟器无法复现列断裂或文字截断问题
多列响应式最麻烦的不是写法，而是内容语义和视觉节奏的断裂感——同一段文字在 3 列和 1 列下阅读路径完全不同，而 CSS 不管这个。你得手动控制
break-before
、
break-after
，甚至用 JS 监听 resize 来微调分隔点，否则用户滚动时会明显感到“卡一下”。