Container Queries 的核心是让容器显式声明可查询性，需设置 container-type 和 contain: size，并确保尺寸稳定；它与媒体查询职责不同，不可嵌套。

要让组件真正“看懂”自己所处的容器环境，并据此调整样式，关键不是等视口变化，而是让容器本身具备可测量、可响应的边界。Container Queries 的核心价值，就是把响应逻辑从“全局窗口”下沉到“局部容器”，但这个能力不会自动生效——它依赖明确的 DOM 结构约束和 CSS 显式声明。

容器必须显式声明为“可查询”

仅写 @container 规则远远不够。浏览器默认忽略所有容器查询，除非目标元素被明确标记为容器：

• 给父容器设置 container-type: inline-size（最常用）或 block-size，声明它按哪个方向提供尺寸上下文
• 同时必须加上 contain: size（最低要求），否则查询条件永不触发；推荐用 contain: layout style size，避免子内容撑破容器导致尺寸误判
• 不能用 contain: content，它不包含尺寸隔离能力，@container 会静默失效

确保容器尺寸稳定且可测

很多查询“写了却没反应”，本质是容器尺寸不可靠。常见陷阱包括：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• Flex 或 Grid 子项默认有最小宽度限制（如 min-width: auto），会阻止其按内容收缩；需手动加 min-width: 0 或 width: fit-content
• 容器宽高来自弹性布局（如 flex: 1、grid-column: 1 / -1），而父级又没设明确尺寸，此时尺寸无法稳定测量
• 浮动（float）、绝对定位（position: absolute）、内联显示（display: inline）都会破坏布局上下文，使 container 失效

DOM 状态与容器查询协同使用

Container Queries 本身不感知 JS 状态，但你可以用 DOM 属性或类名作为“开关”，配合容器查询做组合判断：

• 在 React/Vue 中，给容器元素动态添加状态类，例如
• 在 CSS 中结合属性选择器：@container (inline-size > 480px) { .card-container.is-expanded .card { transform: scale(1.1); } }
• 也可用自定义属性驱动样式：
  ，再配合 @container 写条件规则

  避免与媒体查询混淆，明确职责边界

  Container Queries 不是 @media 的升级版，两者定位不同：

  • @media 控制页面级结构切换（比如整页从单列变三列）
  • @container 控制组件级细节适配（比如同一个卡片，在侧边栏里堆叠，在主区里横排）
  • 它们可以共存，但不能嵌套：不能在 @media 块里写 @container，也不能反过来
  • 单位也不同：@container 只支持 px、vw、%（仅当容器自身宽度明确时才可靠），不支持 em、rem