如何实现移动端自适应的响应式3列布局？现有CSS column-count代码调整求助

现有代码问题 #

• 你用了行内固定的column-count:3属性，无法根据屏幕宽度动态调整列数
• 固定column-gap:310px的间距太大，移动端屏幕宽度远小于这个值，会直接导致布局溢出错乱
• 缺少响应式核心的媒体查询规则，以及移动端适配必需的视口声明

修改方案 #

第一步：添加移动端视口声明 #

在HTML的<head>标签内添加如下代码，确保移动端能正确识别设备宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

第二步：调整原有代码结构 #

把行内样式抽离为独立CSS类，添加媒体查询规则，完整代码如下：

<style>
/* 桌面端默认样式：3列布局 */
.column-list {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  column-gap: 310px;
  /* 清除ul默认内边距，可根据需求调整 */
  padding-left: 0;
  list-style: none;
}

/* 平板端（宽度小于768px）：改为2列，缩小间距 */
@media (max-width: 768px) {
  .column-list {
    column-count: 2;
    column-gap: 24px;
  }
}

/* 手机端（宽度小于480px）：改为1列，缩小间距 */
@media (max-width: 480px) {
  .column-list {
    column-count: 1;
    column-gap: 16px;
  }
}
</style>

<ul class="column-list">
    <li>
       <p>aaa</p>
    </li>
    <li>
       <p>bbb</p>
    </li>
    <li>
       <p>ccc</p>
    </li>
    <li>
       <p>ddd</p>
    </li>
    <li>
       <p>eee</p>
    </li>
    <li>
       <p>fff</p>
    </li>
    <li>
       <p>ggg</p>
    </li>
    <li>
       <p>hhh</p>
    </li>
    <li>
       <p>iii</p>
    </li>
</ul>

可选调整说明 #

• 媒体查询的断点值（768px、480px）可以根据你的实际业务需求修改
• 不同断点下的column-gap值也可以自行调整到合适的大小

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