如何在min-width为786px的屏幕上实现页面主内容区两列布局

解决方案 #

你当前布局未生效的核心原因是：仅在min-width: 1024px的媒体查询中配置了主内容容器的行排列规则，768px-1023px区间仍保持默认的列布局，直接修改对应断点的flex规则即可实现需求。

具体修改步骤

1. 调整768px（若需要786px触发直接修改断点数值即可）断点的flex配置，新增主内容容器的行排列、自动换行规则，同时设置项目宽度实现两列布局：

@media (min-width: 768px) {
  .intro-unit {
    flex-direction: row-reverse;
    justify-content: space-evenly;
  }
  /* 新增以下规则 */
  .container,
  .container-2 {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .unit {
    width: 48%; /* 两列布局，预留间隙空间 */
  }
}

2. 在原有1024px的媒体查询中新增项目宽度规则，实现大屏下的三列布局：

@media (min-width: 1024px) {
  .main-header {
    flex-direction: row;
    justify-content: space-between;
  }
  .main-nav {
    flex-direction: row;
  }
  .intro-unit {
    flex-direction: row-reverse;
  }
  .container,
  .container-2 {
    flex-direction: row;
    justify-content: space-around;
  }
  .footer-list {
    flex-direction: row;
    justify-content: space-between;
  }
  /* 新增以下规则 */
  .unit {
    width: 30%; /* 三列布局 */
  }
}

修改完成后，屏幕宽度≥768px时主内容区自动切换为两列布局，≥1024px时切换为三列布局，小屏保持单列布局，符合响应式交互逻辑。

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