Container Queries 从入门到精通

容器查询是 2026 年响应式设计的新基石。

基础用法

.card-container {
  container-type: inline-size;
  container-name: card;
}
@container card (min-width: 400px) {
  .card { display: grid; grid-template-columns: 200px 1fr; }
}

与媒体查询配合

媒体查询管页面级布局，容器查询管组件级适配：

@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
}
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

容器查询让组件真正做到"一次编写，到处适配"，是组件化开发的理想方案。