columns属性在媒体查询中常无效，因依赖容器宽度和流式布局，父容器width:auto或flex/grid影响断点计算，且columns不触发重排；应设width/max-width、用column-count代替columns简写、显式声明column-gap，并避免与grid/flex混用。
columns属性在媒体查询中为什么没生效
直接在媒体查询里改 columns 常常无效，根本原因是它依赖容器宽度和内容流式布局，而很多父容器默认 width: auto 或受 flex/grid 影响，导致断点计算失准。更常见的是，columns 本身不触发重排（reflow），浏览器可能跳过样式更新。
实操建议：
- 确保目标元素有明确的
width或max-width（比如width: 100%），避免被父级弹性布局“撑开” - 用
column-count而非columns简写——后者可能被部分浏览器忽略断点切换 - 加
column-gap显式声明，否则某些旧版 Safari 会忽略列数变更 - 必要时强制重绘：在媒体查询中加
transform: translateZ(0)或will-change: column-count
移动端优先设置3列→2列→1列的典型断点写法
别按设备尺寸硬套 768px / 1024px，实际应基于内容可读性判断。文字密度高时，哪怕在 iPad 上也该保持 2 列；图片主导的网格则可在更宽视口就切到 3 列。
推荐写法（CSS）：
@media (max-width: 767px) {
.article-grid {
column-count: 1;
column-gap: 1rem;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.article-grid {
column-count: 2;
column-gap: 1.5rem;
}
}
@media (min-width: 1024px) {
.article-grid {
column-count: 3;
column-gap: 2rem;
}
}
注意：column-gap 必须随列数调整，否则小屏下间隙过大、内容被挤出可视区。
与CSS Grid或Flex布局混用时的冲突表现
如果父容器已是 display: grid 或 display: flex，再对子元素设 column-count 基本无效——因为多列布局（multi-column）只对块级流内元素起作用，而 Grid/Flex 子项已脱离常规文档流。
解决路径：
- 要么放弃
columns，改用grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) - 要么把多列逻辑上移到父容器：让父容器设
columns，子元素用break-inside: avoid防止单条内容跨列断裂 - 若必须混用，需将 Grid/Flex 容器设为
display: block并清除所有grid-/flex-相关属性
IE11及旧版Safari对columns的支持差异
IE11 支持 column-count 但不支持 column-fill: balance，且对 break-inside 兼容极差；iOS Safari 9–12 在横屏切换时经常卡住列数不变，甚至渲染空白。
稳妥方案：
- 用
@supports (column-count: 2)包裹多列规则，避免降级失败 - 对 IE11 单独提供
display: block+float: left的备选布局（配合width计算） - 在 iOS Safari 中监听
orientationchange事件，手动触发改样式（如切换 class） - 避免在
columns内嵌套position: sticky元素——旧引擎会完全失效
多列布局真正可靠的场景其实很窄：长文本分栏、卡片式新闻流、无交互纯展示内容。一旦涉及 hover 动画、表单控件或复杂嵌套，就该换 Grid 或 JS 驱动方案了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
