# CSS Container Query 参考

URL: https://caijiao.org/reference/css/container-query
Source: docs/reference/css/container-query.md
Description: CSS Container Query Reference，整理 container-type、container-name、@container、组件级响应式、可运行演示和常见错误。

Container Query 允许组件根据容器尺寸而不是视口尺寸调整样式，适合复用卡片、侧栏、信息块和嵌入式组件。

## 语法

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

@container (min-width: 420px) {
  .card {
    grid-template-columns: 120px 1fr;
  }
}
```

## 常用属性

| 属性或规则 | 说明 |
| --- | --- |
| `container-type` | 声明容器查询类型 |
| `container-name` | 给容器命名 |
| `container` | 简写属性 |
| `@container` | 编写容器查询规则 |

## 可运行演示

[在线代码演示](/reference/css/demos/container-query-card.html)

## 常见错误

- 没有在父级设置 `container-type`，导致 `@container` 不生效。
- 把容器查询当成媒体查询替代品；页面级布局仍然适合 media query。
- 查询条件写在被查询元素自身上，实际应该查询其容器。

## 相关内容

- [CSS Reference](/reference/css/)
- [CSS 响应式技巧](/css/10-responsive/04-techniques)
- [grid 参考](/reference/css/grid)
- [MDN CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries)