CSS容器查询实战

用容器查询构建真正组件级响应式布局，摆脱仅依赖视口尺寸的限制

2024年3月5日
2 min read
CSS响应式容器查询前端

前言

媒体查询基于视口宽度做判断，适合页面级布局。但在组件复用场景中，组件所在容器大小更关键。

容器查询的核心思路

容器查询让组件根据父容器尺寸自适应，而不是根据全局视口。

1. 标记容器

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

2. 编写容器查询

@container list (min-width: 600px) {
  .card {
    grid-template-columns: 160px 1fr;
  }
}

实战示例

在侧边栏与主内容区复用同一张卡片时，使用容器查询可以自动切换布局。

.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
 
@container (min-width: 480px) {
  .card {
    grid-template-columns: 120px 1fr;
  }
}

常见问题

  1. 记得给父容器设置container-type
  2. 仅在需要时使用，避免过度嵌套
  3. Safari需要较新版本支持

总结

容器查询让组件真正“自适应”，在设计系统中价值尤其明显。