CSS Container Queries：响应式设计的新突破

什么是 Container Queries？

Container Queries 是 CSS 的一个新特性，允许根据父容器的尺寸来应用样式。

Container Queries vs Media Queries

特性	Media Queries	Container Queries
参考对象	视口尺寸	父容器尺寸
应用范围	全局	局部组件
响应粒度	页面级别	组件级别

基础用法

css 复制代码

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

@container card (min-width: 400px) {
  .card-content {
    display: flex;
  }
}

Container Type

css 复制代码

.element {
  container-type: size;        /* 同时关注宽高 */
  container-type: inline-size; /* 仅关注行内尺寸 */
  container-type: normal;      /* 默认，不建立容器 */
}

Container Name

css 复制代码

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

@container card-container (min-width: 500px) {
  .card-title {
    font-size: 1.5rem;
  }
}

容器查询单位

css 复制代码

@container (min-width: 400px) {
  .element {
    font-size: 1cqi;  /* 容器宽度的 1% */
    padding: 2cqw;    /* 容器宽度的 2% */
    margin: 3cqh;     /* 容器高度的 3% */
  }
}

实际应用

响应式卡片

css 复制代码

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

.card-header {
  font-size: 1rem;
}

.card-body {
  padding: 1rem;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
  }
  
  .card-header {
    font-size: 1.25rem;
    width: 30%;
  }
  
  .card-body {
    flex: 1;
    padding: 1.5rem;
  }
}

组件级响应式

css 复制代码

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.user-info {
  container-type: inline-size;
  container-name: user-info;
}

@container user-info (min-width: 300px) {
  .avatar {
    width: 64px;
    height: 64px;
  }
  
  .username {
    font-size: 1.1rem;
    font-weight: bold;
  }
}

组合使用

css 复制代码

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

@container card (min-width: 400px) and (max-width: 600px) {
  .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@container card (min-width: 601px) {
  .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

嵌套容器

css 复制代码

.layout {
  container-type: inline-size;
  container-name: layout;
}

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

@container layout (min-width: 800px) {
  .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@container card (min-width: 300px) {
  .card-title {
    font-size: 1.25rem;
  }
}

浏览器兼容性

浏览器	支持情况
Chrome	✅ 105+
Firefox	✅ 119+
Safari	✅ 16.4+
Edge	✅ 105+

最佳实践

1. 合理命名容器

css 复制代码

.main-content {
  container-type: inline-size;
  container-name: main-content;
}

2. 优先使用容器查询

css 复制代码

/* 先定义默认样式 */
.card {
  padding: 1rem;
}

/* 再定义容器查询样式 */
@container (min-width: 400px) {
  .card {
    padding: 1.5rem;
  }
}

3. 结合媒体查询使用

css 复制代码

/* 全局响应式 */
@media (min-width: 1200px) {
  .page-container {
    max-width: 1200px;
  }
}

/* 组件响应式 */
.card {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card {
    display: flex;
  }
}

总结

Container Queries 为响应式设计带来了新的可能性：

组件级响应式：根据父容器尺寸调整样式
更高的复用性：组件可以在不同场景自适应
更清晰的代码：将响应式逻辑封装在组件内部
更好的用户体验：更精细的响应式控制

掌握 Container Queries，让你的组件更加灵活和强大。