CSS 如何实现容器查询响应式？

Question

CSS 如何实现容器查询响应式？

仓乃文 · Accepted Answer

传统媒体查询基于视口宽度，容器查询（@container）基于父容器宽度，实现真正的组件级响应式，组件在任何位置都能自适应。

```css
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
  .card-title {
    font-size: 1.5rem;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
  .card-title {
    font-size: 1rem;
  }
}
```

补充说明：
- container-type: inline-size 声明容器为内联尺寸查询容器
- container-name 给容器命名，@container 通过名称匹配
- 组件放在侧边栏（窄）和主内容区（宽）会自动切换布局
- Chrome 105+、Safari 16+、Firefox 110+ 支持