CSS @container 容器查询

CSS Container Queries：@container规则、container-type（inline-size/normal）、container-name命名容器、与@media的区别、基于父容器尺寸的响应式设计 · 难度：高级 · +20XP

CSS Container Queries —— 组件级响应式

@media查询是基于视口大小的。但如果一个组件放在侧边栏（窄）和放在主内容区（宽），它应该有不同的布局——@media做不到，@container可以！

声明容器

.card-wrapper {
  container-type: inline-size;  /* 声明这是一个容器 */
  container-name: cardContainer; /* 给容器命名（可选）*/
}

根据容器尺寸调整样式

@container cardContainer (min-width: 400px) {
  .card {
    display: flex;         /* 宽容器：横向布局 */
  }
}
@container cardContainer (max-width: 399px) {
  .card {
    display: block;        /* 窄容器：纵向布局 */
  }
}

同一个卡片组件，放在宽区域和窄区域自动切换布局——真正的组件级响应式！

动手练习

1. 基础练习：做一个响应式卡片——放在宽容器时图文横排，放在窄容器时图文竖排。
2. 进阶应用：用container queries做一个"自适应仪表盘"——小面板简化显示，大面板详细显示。
3. 项目实战：把你网站中所有"在不同页面位置表现不同"的组件改用container queries。