CSS Container Queries 完全指南：比媒体查询更强大的响应式方案

1
/* 声明一个容器 */
2
.sidebar {
3
  container-type: inline-size;
4
  container-name: sidebar;
5
}
6

7
/* 查询容器尺寸 */
8
@container sidebar (max-width: 300px) {
9
  .card {
10
    flex-direction: column;
11
  }
12
}
13

14
@container sidebar (min-width: 301px) {
15
  .card {
16
    flex-direction: row;
17
  }
18
}

1
.page {
2
  container-type: inline-size;
3
  container-name: page;
4
}
5

6
.sidebar {
7
  container-type: inline-size;
8
  container-name: sidebar;
9
}
10

11
/* 精确查询 sidebar 容器 */
12
@container sidebar (max-width: 250px) {
13
  .nav-link {
14
    font-size: 0.875rem;
15
  }
16
}
17

18
/* 精确查询 page 容器 */
19
@container page (min-width: 1200px) {
20
  .hero {
21
    padding: 4rem;
22
  }
23
}

1
.card-wrapper {
2
  container: card / inline-size;
3
}
4

5
/* 默认：小容器，纵向堆叠 */
6
.card {
7
  display: flex;
8
  flex-direction: column;
9
  border-radius: 8px;
10
  overflow: hidden;
11
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
12
}
13

14
.card__image {
15
  width: 100%;
16
  height: 200px;
17
  object-fit: cover;
18
}
19

20
.card__body {
21
  padding: 1rem;
22
}
23

24
.card__title {
25
  font-size: 1.125rem;
26
  margin-bottom: 0.5rem;
27
}
28

29
/* 中等容器：横向排列 */
30
@container card (width >= 400px) {
31
  .card {
32
    flex-direction: row;
33
  }
34

35
  .card__image {
36
    width: 40%;
37
    height: auto;
38
    min-height: 180px;
39
  }
40

41
  .card__body {
42
    flex: 1;
43
    display: flex;
44
    flex-direction: column;
45
    justify-content: center;
46
  }
47
}
48

49
/* 大容器：增强样式 */
50
@container card (width >= 700px) {
51
  .card__title {
52
    font-size: 1.75rem;
53
  }
54

55
  .card__excerpt {
56
    font-size: 1.125rem;
57
    line-height: 1.8;
58
  }
59

60
  .card__image {
61
    width: 45%;
62
  }
63
}

1
.nav-container {
2
  container: nav / inline-size;
3
}
4

5
.nav {
6
  display: flex;
7
  align-items: center;
8
  gap: 1rem;
9
}
10

11
.nav-links {
12
  display: flex;
13
  gap: 0.5rem;
14
}
15

16
.nav-label {
17
  display: inline;
18
}
19

20
.nav-hamburger {
21
  display: none;
22
}
23

24
/* 窄容器：隐藏文字标签，只显示图标 */
25
@container nav (width < 600px) {
26
  .nav-label {
27
    display: none;
28
  }
29
}
30

31
/* 更窄：切换为汉堡菜单 */
32
@container nav (width < 400px) {
33
  .nav-links {
34
    display: none;
35
  }
36

37
  .nav-hamburger {
38
    display: block;
39
  }
40
}

1
.dashboard-panel {
2
  container: panel / inline-size;
3
}
4

5
.stats-grid {
6
  display: grid;
7
  gap: 1rem;
8
  grid-template-columns: 1fr;
9
}
10

11
/* 中等面板：两列 */
12
@container panel (width >= 500px) {
13
  .stats-grid {
14
    grid-template-columns: repeat(2, 1fr);
15
  }
16
}
17

18
/* 大面板：四列 + 图表可见 */
19
@container panel (width >= 900px) {
20
  .stats-grid {
21
    grid-template-columns: repeat(4, 1fr);
22
  }
23

24
  .stats-chart {
25
    display: block;
26
    height: 300px;
27
  }
28
}
29

30
/* 小面板：精简模式 */
31
@container panel (width < 300px) {
32
  .stats-item {
33
    padding: 0.5rem;
34
  }
35

36
  .stats-item__label {
37
    font-size: 0.75rem;
38
  }
39

40
  .stats-item__value {
41
    font-size: 1.25rem;
42
  }
43

44
  .stats-item__trend {
45
    display: none;
46
  }
47
}

1
/* ❌ 错误：不能查询自身的尺寸来改变自身 */
2
.box {
3
  container-type: inline-size;
4
}
5
@container (width >= 300px) {
6
  .box {
7
    padding: 2rem; /* 这不会应用到 .box 自身 */
8
  }
9
}
10

11
/* ✅ 正确：查询的是祖先容器，样式应用到后代 */
12
.box-wrapper {
13
  container-type: inline-size;
14
}
15
@container (width >= 300px) {
16
  .box {
17
    padding: 2rem;
18
  }
19
}

1
/* ❌ 不命名，依赖最近祖先，容易在嵌套时出错 */
2
.a { container-type: inline-size; }
3
.b { container-type: inline-size; }
4

5
@container (width >= 500px) {
6
  .target { /* 查的是哪个？ */ }
7
}
8

9
/* ✅ 明确命名 */
10
.a { container: layout-a / inline-size; }
11
.b { container: layout-b / inline-size; }
12

13
@container layout-a (width >= 500px) {
14
  .target { /* 明确查询 layout-a */ }
15
}