如何通过CSS @media查询实现小屏幕下div元素纵向堆叠排列

失效原因 #

修改position属性无法生效，是因为当前横向排版完全由父容器.frameContainer的Flex规则控制，和元素定位属性无关。
小屏出现挤压错位的核心原因：Flex容器默认flex-wrap: nowrap不换行，三个固定30%宽度的.frameItem加上中间块的左右2%外边距，总宽度超出小屏容器可视宽度后，会被浏览器强制压缩变形。

媒体查询需调整的属性 #

只需要修改3处CSS规则即可实现需求：

• 父容器.frameContainer：将Flex排列方向从横向改为纵向
• 子项.frameItem：将固定30%宽度改为占满容器可用宽度
• 中间块#middleFrame：清除横向边距，和其他子项保持统一的上下间距

完整代码 #

将以下媒体查询代码追加到原有CSS末尾即可，断点采用通用的768px（覆盖平板、手机类小屏设备），如果需要调整堆叠触发的屏幕阈值，直接修改max-width后的数值：

/* 屏幕宽度 ≤768px 时生效 */
@media screen and (max-width: 768px) {
  .frameContainer {
    /* 切换Flex排列方向为纵向 */
    flex-direction: column;
  }
  .frameItem {
    /* 子项宽度撑满容器 */
    width: 100%;
  }
  #middleFrame {
    /* 移除左右边距，保留统一的上边距 */
    margin: 15px 0 0 0;
  }
}

效果说明 #

• 屏幕宽度大于768px时，保留原有三个模块横向并排、间距均匀的展示效果
• 屏幕宽度小于等于768px时，三个模块自动从上到下逐行排列，每个模块宽度撑满容器，不会再出现挤压错位问题

内容的提问来源于stack exchange，提问作者Maarten van Riel