"CSS 容器查询：响应布局的 container-type 与 container-name"

---

title: "CSS 容器查询：响应布局的 container-type 与 container-name"

keywords:

• Container Queries
• container-type
• container-name
• @container
• 响应式

description: "介绍容器查询的基础语法与使用模式，以容器尺寸驱动响应布局，相比媒体查询更精细，并提供示例与兼容策略。"

categories:

• 文章资讯
• 编程技术

---

概述

容器查询允许基于容器尺寸而非视口尺寸进行样式切换，提升组件级响应能力。通过 container-type/container-name 声明容器，在 @container 中写条件逻辑。

示例

.card { container-type: inline-size; container-name: card }
@container card (width > 600px) {
  .card__media { float: left }
  .card__content { margin-left: 16px }
}

工程建议

• 作用域：为需要响应的组件根声明容器；避免全局容器污染。
• 性能：合理设置容器数量与层级；减少不必要的查询。
• 兼容：特性检测后启用；旧浏览器回退到媒体查询或栅格布局。

参考与验证

• MDN Container Queries 文档：https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries
• web.dev 容器查询指南：https://web.dev/articles/new-responsive
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/container-queries/