如何使用@media查询在最大宽度768px时堆叠div元素

嘿，这个需求很典型，我来给你拆解一下怎么实现～首先先确认你的HTML结构没问题：

<div class="Container"> 
  <div class="box"></div> 
  <div class="box"></div> 
</div>

核心思路是：先给大屏设备设置横向排列的样式，再通过@media媒体查询，在视口宽度≤768px时覆盖原有样式，让元素垂直堆叠。下面给你两种常用的实现方式：

方法1：使用Flexbox（推荐，简洁灵活） #

Flexbox是目前前端布局的首选方案，代码易读且兼容性好（支持绝大多数现代浏览器）：

/* 大屏默认样式：让两个box横向并排 */
.Container {
  display: flex;
  gap: 1rem; /* 可选：给两个box之间添加横向间距 */
}

.box {
  width: 50%; /* 可选：让每个box占容器一半宽度 */
  padding: 2rem;
  background-color: #f0f0f0; /* 加个背景色方便看效果 */
}

/* 媒体查询：视口宽度≤768px时触发 */
@media (max-width: 768px) {
  .Container {
    flex-direction: column; /* 把flex的排列方向改成垂直，实现堆叠 */
  }

  .box {
    width: 100%; /* 可选：小屏时让box占满容器宽度 */
  }
}

方法2：兼容旧浏览器的方案 #

如果需要兼容IE这类旧浏览器，可以用块级元素的特性来实现：

/* 大屏默认样式：让两个box横向排列 */
.box {
  display: inline-block;
  width: 48%; /* 留一点空隙避免换行，也可以用float */
  padding: 2rem;
  background-color: #f0f0f0;
}

/* 媒体查询：视口宽度≤768px时触发 */
@media (max-width: 768px) {
  .box {
    display: block; /* 改成块级元素，自动占满一行，自然堆叠 */
    width: 100%;
    margin-bottom: 1rem; /* 可选：给box之间添加垂直间距 */
  }
}

简单解释下：@media (max-width: 768px) 这个规则的意思是，当浏览器视口的最大宽度达到768px时，里面的CSS样式就会生效，覆盖掉之前的默认样式，从而实现小屏堆叠的效果。

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