如何利用CSS @Media规则根据屏幕尺寸动态调整文本列数？

嘿，我来帮你搞定这个响应式列布局的需求！你已经移除了固定的column-count属性，接下来只需要借助CSS的@media媒体查询，根据不同屏幕宽度设置对应的列数就可以了，具体实现方式如下：

第一步：保留基础共用样式 #

先把.SetColumns类中通用的样式保留下来，比如内边距、列间距、列分隔线这些，不要固定列数：

.SetColumns {
  background: inherit;
  padding: 0 20px 20px 20px;
  column-gap: 40px;
  column-rule: 3px double #666;
  /* 移除固定的column-count，交给媒体查询动态控制 */
}

第二步：添加媒体查询设置不同断点的列数 #

根据不同的屏幕尺寸断点，为.SetColumns设置对应的列数，这里给你一个常用的断点示例，你可以根据自己的需求调整宽度值：

/* 大屏幕（比如桌面端，宽度≥1024px）：显示2列 */
@media (min-width: 1024px) {
  .SetColumns {
    column-count: 2;
    /* 兼容旧版浏览器的前缀 */
    -moz-column-count: 2;
    -webkit-column-count: 2;
  }
}

/* 中等屏幕（比如平板竖屏，768px ≤ 宽度 < 1024px）：显示1列 */
@media (min-width: 768px) and (max-width: 1023px) {
  .SetColumns {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
}

/* 小屏幕（比如手机，宽度<768px）：显示1列 */
@media (max-width: 767px) {
  .SetColumns {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
}

额外优化建议 #

• 如果你想在超宽屏幕（比如1200px以上）显示3列，只需要再加一个媒体查询：

@media (min-width: 1200px) {
  .SetColumns {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
  }
}

• 现在大部分现代浏览器已经支持标准的CSS多列属性，但如果需要兼容旧版Firefox、Chrome或Safari，保留-moz-和-webkit-前缀是很有必要的。

内容的提问来源于stack exchange，提问作者user5175034