概述

容器查询允许组件基于其父容器尺寸而非视口进行响应式变化，解决传统媒体查询在组件化布局中的局限。通过 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

关键词校验

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