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

概述 容器查询允许基于容器尺寸而非视口尺寸进行样式切换，提升组件级响应能力。通过 `container-type`/`container-name` 声明容器，在 `@container` 中写条件逻辑。 示例 ```css .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/