CSS 容器查询终于可以用了
比媒体查询更灵活的响应式方案，以及它的使用场景。
容器查询（Container Queries）让组件可以根据父容器的尺寸而不是视口尺寸来调整样式。
基本用法
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}适用场景
- 可复用的卡片组件
- 侧边栏与主内容区共享的组件
- 设计系统中的响应式组件
兼容性
截至 2026 年，主流浏览器均已支持容器查询，可以放心使用。