移动端5列分类布局异常修复求助 | 商业目录CSS优化

问题核心 #

固定设置5列布局未适配移动端屏幕宽度，导致内容挤压、排版混乱。

解决方案 #

通过CSS媒体查询实现响应式列布局，根据屏幕宽度动态调整列数，同时优化间距避免拥挤：

#native {
  width: 100%;
  height: min-content;
  display: inline-block;
  column-count: 5;
  column-gap: 1rem; /* 增加列间距，避免内容拥挤 */
  padding: 0 1rem; /* 左右内边距，防止内容贴边 */
}

/* 平板设备（屏幕宽度≤768px） */
@media (max-width: 768px) {
  #native {
    column-count: 3;
  }
}

/* 手机设备（屏幕宽度≤480px） */
@media (max-width: 480px) {
  #native {
    column-count: 2;
    column-gap: 0.8rem;
  }
}

/* 极小屏幕设备（屏幕宽度≤320px） */
@media (max-width: 320px) {
  #native {
    column-count: 1;
  }
}

额外优化（可选） #

如果单个分类项出现跨列断裂的情况，给分类子元素添加以下样式：

#native > .category-item {
  break-inside: avoid; /* 防止分类项被拆分到两列 */
  margin-bottom: 0.5rem; /* 增加分类项上下间距 */
}

说明 #

• 媒体查询断点可根据实际需求调整，确保不同设备下布局紧凑且可读
• 新增的间距和内边距能有效提升移动端视觉体验，避免内容拥挤

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