响应式媒体查询规则不生效，小屏无法实现双栏布局转通栏堆叠

核心失效根因 #

当前布局失效最常见的原因是大屏端用浮动实现左右分栏时，媒体查询内只给两个内容块设置了100%宽度，没有移除元素原本的浮动属性。
浮动元素的特性不会因为宽度拉满到100%就自动回归正常文档流：哪怕两个块宽度都是100%，只要还带着float: left/float: right的规则，元素依然会脱离普通流，按照浮动规则横向排布，根本不会形成上下垂直堆叠的效果。

分步修复操作 #

• 先校准大屏端的基础样式规则
  屏幕宽度大于800px时的默认布局要满足：
  • 左侧内容块设置float: left; width: 75%;
  • 右侧内容块设置float: right; width: 25%;
  • 包裹两个内容块的容器要加清除浮动逻辑，避免父元素高度塌陷，比如通过伪元素实现清除浮动：content-wrapper::after { content: ''; display: block; clear: both; }
• 修正800px断点下的媒体查询规则
  不要仅设置列宽度为100%，必须主动取消浮动属性，参考写法：

  @media (max-width: 800px) {
    .left-content, .right-content {
      /* 关键：取消浮动，让元素回归普通块级文档流 */
      float: none;
      width: 100%;
    }
  }
  

• 排查其他可能导致规则不生效的细节问题
  • 确认媒体查询的书写顺序：大屏的基础样式要写在媒体查询规则的前面，避免小屏规则被后续的同权重样式覆盖
  • 核对视口元标签的拼写，确保写在文档head区域：<meta name="viewport" content="width=device-width, initial-scale=1.0">，没有属性名、值的拼写错误
  • 检查CSS选择器优先级：有没有更高权重的规则（比如内联样式、ID选择器）覆盖了你在媒体查询里设置的宽度、浮动属性

最小可复现的布局参考代码 #

HTML结构：

<div class="page-container">
  <div class="content-wrapper">
    <div class="left-content">左侧红色内容块</div>
    <div class="right-content">右侧绿色内容块</div>
  </div>
  <footer class="fixed-footer">固定定位页脚</footer>
</div>

对应CSS：

.page-container { max-width: 1200px; margin: 0 auto; }
.content-wrapper::after {
  content: '';
  display: block;
  clear: both;
}
.left-content {
  float: left;
  width: 75%;
  background: #f8d7da;
  min-height: 300px;
}
.right-content {
  float: right;
  width: 25%;
  background: #d1e7dd;
  min-height: 300px;
}
.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #eeeeee;
}
@media (max-width: 800px) {
  .left-content, .right-content {
    float: none;
    width: 100%;
  }
}

如果不想维护浮动清除逻辑，也可以用Flex布局实现同等效果，不需要写清除浮动规则，小屏直接给容器设置flex-direction: column就能快速实现垂直堆叠，代码维护成本更低。

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