---

title: "CSS 容器查询：响应式组件的设计与性能"

keywords:

• 容器查询
• @container
• container-type
• size queries
• 响应式组件
• 性能

description: "介绍 CSS 容器查询（@container）的语法与用法，说明 container-type 与 size 查询的适用场景，并给出响应式组件设计与性能注意事项。"

categories:

• 文章资讯
• 编程技术

---

概述

容器查询允许组件基于其父容器尺寸而非视口进行响应式变化，解决传统媒体查询在组件化布局中的局限。通过 container-type 声明可对块级尺寸进行查询，实现更稳定的组件适配。

语法与用法

• 声明容器：container-type: inline-size; container-name: card;。
• 查询：

@container card (width > 600px) {
  .card { grid-template-columns: 1fr 1fr; }
}
@container (inline-size < 400px) {
  .sidebar { display: none; }
}

• 常用查询维度：width/inline-size、height/block-size。

工程实践与性能

• 精准作用域：仅对需要的父容器启用 container-type，避免全站开启导致布局计算成本增加。
• 命名容器：使用 container-name 组织查询，提升可维护性。
• 与媒体查询协作：视口级与容器级规则分层，减少冲突。

参考与验证

• ［参考1］MDN 中文：容器查询（语法与示例）：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_containment/Container_queries
• ［参考2］MDN 英文：容器查询与 container-type/container-name：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
• ［参考3］web.dev：容器查询指南与实践案例：https://web.dev/articles/new-responsive#container_queries

关键词校验

关键词覆盖容器查询与组件响应式，与正文一致。