如何结合@media查询与@container查询实现自适应布局？求经验与代码示例

这个方案完全可行，而且是一种组件级精细化响应的优秀思路：通过@media监听视口变化来调整外层通用容器的尺寸/布局，再用@container让内部模块响应容器的尺寸变化，形成「视口→容器→模块」的连锁适配逻辑，比单纯依赖视口的响应式更灵活，尤其适合需要在不同容器尺寸下独立调整组件样式的场景。

核心实现思路 #

1. 给通用容器设置container-type: inline-size，开启容器查询功能
2. 用@media根据视口宽度调整容器的核心属性（比如最大宽度、内边距、布局方式）
3. 用@container根据容器的内联尺寸（宽度）调整内部图文模块的布局、元素大小等

代码示例 #

HTML结构 #

<div class="general-container">
  <div class="card">
    <img src="your-image-1.jpg" alt="图文模块1" class="card-img">
    <div class="card-content">
      <h3>模块标题1</h3>
      <p>模块描述内容，用于展示自适应后的文字排版效果。</p>
    </div>
  </div>
  <div class="card">
    <img src="your-image-2.jpg" alt="图文模块2" class="card-img">
    <div class="card-content">
      <h3>模块标题2</h3>
      <p>模块描述内容，用于展示自适应后的文字排版效果。</p>
    </div>
  </div>
  <div class="card">
    <img src="your-image-3.jpg" alt="图文模块3" class="card-img">
    <div class="card-content">
      <h3>模块标题3</h3>
      <p>模块描述内容，用于展示自适应后的文字排版效果。</p>
    </div>
  </div>
</div>

CSS实现 #

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 通用容器基础样式 */
.general-container {
  container-type: inline-size; /* 开启容器查询，基于内联尺寸（宽度） */
  container-name: card-container; /* 可选：给容器命名，方便多容器场景区分 */
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* 图文模块基础样式 */
.card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
  flex: 1 1 300px; /* 基础自适应宽度 */
}

.card-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
}

.card-content h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.card-content p {
  font-size: 0.9rem;
  color: #666;
}

/* 用@media调整通用容器（视口驱动） */
@media (max-width: 900px) {
  .general-container {
    max-width: 800px;
    padding: 0.8rem;
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  .general-container {
    flex-direction: column;
    padding: 0.5rem;
  }
}

/* 用@container调整内部模块（容器驱动） */
@container card-container (max-width: 800px) {
  .card {
    flex-direction: column;
    text-align: center;
  }

  .card-img {
    width: 100%;
    height: 180px;
  }
}

@container card-container (max-width: 400px) {
  .card-content h3 {
    font-size: 1rem;
  }

  .card-content p {
    font-size: 0.85rem;
  }
}

实用经验 #

1. 浏览器兼容性：目前主流浏览器（Chrome 105+、Firefox 110+、Safari 16+）都已支持容器查询，对于旧浏览器可以用渐进增强——默认展示基础样式，不影响核心功能。
2. 容器命名：如果页面有多个可查询容器，建议给容器设置container-name，避免@container查询冲突。
3. 避免过度嵌套：保持「视口→容器→模块」的层级清晰，不要在模块内再嵌套多层容器查询，否则会增加维护成本。
4. 结合flex/grid：容器的布局尽量用flex或grid，这样视口变化时容器的尺寸调整更平滑，内部模块的@container触发更自然。
5. 测试边界值：重点测试容器尺寸的临界值（比如示例中的800px、400px），确保模块在切换样式时没有布局错乱。

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