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

概述容器查询允许组件基于其父容器尺寸而非视口进行响应式变化，解决传统媒体查询在组件化布局中的局限。通过 `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关键词校验关键词覆盖容器查询与组件响应式，与正文一致。