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

概述容器查询允许基于容器尺寸而非视口尺寸进行样式切换，提升组件级响应能力。通过 `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_Queriesweb.dev 容器查询指南：https://web.dev/articles/new-responsiveChrome 平台文档：https://developer.chrome.com/docs/web-platform/container-queries/