容器查询允许在组件级别进行响应式设计，独立于视口大小，让组件能够根据其容器的尺寸而不是整个页面的尺寸来调整样式。

📖 本章概述

容器查询是CSS中的一个革命性特性，它解决了传统媒体查询只能基于视口尺寸进行响应式设计的局限性。通过容器查询，我们可以创建真正的组件级响应式设计，让组件根据其父容器的尺寸来调整样式，而不是依赖于整个页面的尺寸。

🎯 学习目标

• 理解容器查询的基本概念和工作原理

• 掌握容器查询的语法和使用方法

• 学会设置容器类型和容器名称

• 了解容器查询与媒体查询的区别

• 掌握实际项目中的应用技巧

🚀 容器查询基础

基本语法

容器查询需要两个步骤：定义容器和查询容器。

/* 1. 定义容器 */
.card {
  container-type: inline-size;
  container-name: card;
}

/* 2. 查询容器 */
@container card (min-width: 400px) {
  .card-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

容器类型

/* 仅查询内联尺寸（宽度） */
.container {
  container-type: inline-size;
}

/* 仅查询块级尺寸（高度） */
.container {
  container-type: block-size;
}

/* 查询两个维度 */
.container {
  container-type: size;
}

/* 正常容器（默认值） */
.container {
  container-type: normal;
}

简写语法

/* 同时设置类型和名称 */
.card {
  container: card / inline-size;
}

/* 等同于 */
.card {
  container-name: card;
  container-type: inline-size;
}

🎨 基础应用示例

响应式卡片组件

/* 卡片容器设置 */
.card {
  container-type: inline-size;
  container-name: card;
  background: white;