CSS移动端适配：如何让两个div上下堆叠排列，现有代码未生效

核心实现逻辑基于flex布局搭配媒体查询，具体实现方案和常见问题排查如下：

• 第一步：先确认HTML头部已添加viewport适配标签，这是移动端适配的基础前提

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 第二步：编写桌面端基础布局样式

  /* 外层容器默认横向排列，适配桌面端 */
  .newsletter {
    display: flex;
    width: 100%;
    gap: 20px; /* 可根据设计需求调整间距 */
  }
  /* 两个子div默认各占一半宽度 */
  .news-img, .news-content {
    flex: 0 0 calc(50% - 10px);
  }
  /* 表单容器默认横向排列输入框 */
  .form-wrap {
    display: flex;
    gap: 10px;
  }
  .form-wrap input {
    padding: 8px 12px;
  }
  

• 第三步：媒体查询必须写在所有基础样式之后，避免被原有样式覆盖，建议取767px作为移动端适配断点

  @media (max-width: 767px) {
    /* 外层容器改为纵向堆叠 */
    .newsletter {
      flex-direction: column;
    }
    /* 子div宽度改为100%撑满容器 */
    .news-img, .news-content {
      flex: 0 0 100%;
      width: 100%;
    }
    /* 若需要输入框也上下堆叠可添加以下代码，不需要可删除 */
    .form-wrap {
      flex-direction: column;
    }
    .form-wrap input {
      width: 100%;
      margin-bottom: 10px;
    }
  }
  

• 常见不生效问题排查点：
  • 媒体查询放置顺序错误：必须放在对应基础样式的后面，CSS遵循后写样式优先覆盖的规则
  • 选择器权重不足：如果原代码中.newsletter的选择器层级更高（比如带父类选择器前缀），需要保证媒体查询内的选择器权重不低于原样式
  • 断点数值不匹配：测试时确保浏览器宽度已经缩小到你设置的max-width阈值以下
  • 缺少viewport标签：移动端浏览器会默认模拟980px宽度渲染页面，导致媒体查询不触发

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