---

title: CSS 容器查询（@container）与响应式组件

keywords:

• CSS Container Queries
• @container
• 尺度响应
• 组件化
• layout

description: 讲解容器查询的语法与使用场景，以组件所在容器而非视口为依据实现响应式布局，提升复用与可维护性。

date: 2025-11-27

sources:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
• https://web.dev/new-responsive/

categories:

• 文章资讯
• 编程技术

---

概述

容器查询让样式基于容器尺寸而非视口，适合复杂网格与组件复用场景。

语法（已验证）

• 定义容器：container-type: inline-size; container-name: card;
• 查询：@container card (min-width: 480px) { / styles / }

建议

• 与 grid/flex 结合设计组件断点；避免过度嵌套导致复杂性上升