CSS容器查询：@container与响应式组件实践

概览

容器查询为组件级断点提供原生能力，避免仅依赖视口尺寸，提升复用与布局稳定性。

技术参数（已验证）

• 容器：通过 container-type: inline-size 与可选 container-name 声明查询容器。
• 查询：使用 @container 基于容器尺寸进行条件样式；常用 width/inline-size。
• 兼容：现代浏览器支持，需为旧环境提供回退策略。

实战清单

• 组件内部声明容器并定义断点样式；避免全局视口断点干扰。
• 提供渐进增强与回退样式，保障兼容。