响应式布局问题：@media未覆盖原CSS，4个Div无法转为2×2布局

问题描述：
开发响应式网站时，主容器内的4个div在桌面全屏状态下横向并排显示正常，但当屏幕宽度小于1025px时，期望呈现2×2的两行两列排列，实际却仍保持横向并排，@media规则未生效。

原代码：

CSS #

.grid-wide-4-block-main {
  margin-left: auto;
  margin-right: auto;
}

.grid-wide-4-block {
  display: flex;
  justify-content: space-around;
  height: 1000px;
  max-width: auto;
  width: auto;
  margin: auto;
  max-width: 1620px;
}

.grid-wide-logo {
  height: 50px;
  width: 50px;
  margin-left: 10px;
  margin-top: 10px;
}

.grid-wide-4-blocks {
  min-width: 20%;
  margin-left: 3%;
  margin-right: 3%;
  height: 400px;
  background-color: white;
  box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 10%), 0 0.67rem 2rem rgb(0 0 0 / 10%);
}

.grid-wide-4-block-inside {
  margin: 5px;
}

.grid-wide-4-title {
  color: orange;
}

@media screen and (max-width: 1025px) {
  .grid-wide-4-block {
    max-width: 1025px;
    height: 1000px;
  }
  .grid-wide-4-blocks {
    min-width: 45%;
    height: 40%;
    background-color: white;
    box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 10%), 0 0.67rem 2rem rgba(171, 77, 40, 0.1);
  }
}

HTML #

<div class="grid-wide-4-block-main">
  <div class="grid-wide-4-block">
    <?php echo $background; ?>

    <div class="grid-wide-4-block-1 grid-wide-4-blocks">
      <div class="grid-wide-4-block-inside">
        <?php if ($grid_wide_4_imageObj) : ?>
        <img class="grid-wide-4-image-1 grid-wide-logo" src="<?php echo $grid_wide_4_image_url; ?>" />
        <?php endif; ?>
        <h3 class="grid-wide-4-title">
          <?php echo $grid_wide_4_title; ?>
        </h3>
        <p class="grid-wide-4-summary-1">
          <?php echo $grid_wide_4_summary; ?>
        </p>
      </div>
    </div>

    <div class="grid-wide-4-block-2 grid-wide-4-blocks">
      <div class="grid-wide-4-block-inside">
        <?php if ($grid_wide_4_imageObj2) : ?>
        <img class="grid-wide-4-image-2 grid-wide-logo" src="<?php echo $grid_wide_4_image_url2; ?>" />
        <?php endif; ?>
        <h3 class="grid-wide-4-title">
          <?php echo $grid_wide_4_title2; ?>
        </h3>
        <p class="grid-wide-4-summary-2">
          <?php echo $grid_wide_4_summary2; ?>
        </p>
      </div>
    </div>

    <div class="grid-wide-4-block-3 grid-wide-4-blocks">
      <div class="grid-wide-4-block-inside">
        <?php if ($grid_wide_4_imageObj3) : ?>
        <img class="grid-wide-4-image-3 grid-wide-logo" src="<?php echo $grid_wide_4_image_url3; ?>" />
        <?php endif; ?>
        <h3 class="grid-wide-4-title">
          <?php echo $grid_wide_4_title3; ?>
        </h3>
        <p class="grid-wide-4-summary-3">
          <?php echo $grid_wide_4_summary3; ?>
        </p>
      </div>
    </div>

    <div class="grid-wide-4-block-4 grid-wide-4-blocks">
      <div class="grid-wide-4-block-inside">
        <?php if ($grid_wide_4_imageObj4) : ?>
        <img class="grid-wide-4-image-4 grid-wide-logo" src="<?php echo $grid_wide_4_image_url4; ?>" />
        <?php endif; ?>
        <h3 class="grid-wide-4-title">
          <?php echo $grid_wide_4_title4; ?>
        </h3>
        <p class="grid-wide-4-summary-4">
          <?php echo $grid_wide_4_summary4; ?>
        </p>
      </div>
    </div>
  </div>
</div>

问题原因 #

你的flex容器.grid-wide-4-block默认使用flex-wrap: nowrap，这会强制所有子元素在一行显示，即使@media规则修改了子元素宽度，容器也不会自动换行。此外，子元素的min-width和margin设置在小屏可能导致总宽度超过容器，却因为nowrap无法换行。

解决方案 #

修改@media规则，给flex容器添加换行属性，并调整子元素的宽度和margin，确保小屏时能容纳两个元素一行：

.grid-wide-4-block-main {
  margin-left: auto;
  margin-right: auto;
}

.grid-wide-4-block {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2%;
  height: auto;
  max-width: 1620px;
  margin: auto;
  padding: 1rem 0;
}

.grid-wide-logo {
  height: 50px;
  width: 50px;
  margin-left: 10px;
  margin-top: 10px;
}

.grid-wide-4-blocks {
  flex: 0 0 20%;
  height: 400px;
  background-color: white;
  box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 10%), 0 0.67rem 2rem rgb(0 0 0 / 10%);
}

.grid-wide-4-block-inside {
  margin: 5px;
}

.grid-wide-4-title {
  color: orange;
}

@media screen and (max-width: 1025px) {
  .grid-wide-4-block {
    max-width: 90%;
  }
  .grid-wide-4-blocks {
    flex: 0 0 48%;
    height: auto;
    box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 10%), 0 0.67rem 2rem rgba(171, 77, 40, 0.1);
  }
}

修改说明 #

1. 给.grid-wide-4-block添加flex-wrap: wrap，让容器在空间不足时自动换行
2. 用gap替代子元素的左右margin，简化布局控制，避免margin叠加问题
3. 桌面端子元素用flex: 0 0 20%固定宽度，配合gap实现4个横向排列
4. 小屏时将子元素宽度改为flex: 0 0 48%，刚好容纳两个元素一行，同时让高度自适应内容
5. 调整容器的max-width和padding，提升小屏显示的舒适度

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