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会静默失效
确保容器尺寸稳定且可测
很多查询“写了却没反应”，本质是容器尺寸不可靠。常见陷阱包括：
- 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 中，给容器元素动态添加状态类，例如
<div class="card-container is-expanded"> <li>在 CSS 中结合属性选择器：<code>@container (inline-size > 480px) { .card-container.is-expanded .card { transform: scale(1.1); } } - 也可用自定义属性驱动样式：
<div class="card-container" style="--card-mode: 'detail'">，再配合 <code>@container写条件规则避免与媒体查询混淆，明确职责边界
Container Queries 不是
@media的升级版，两者定位不同：-
@media控制页面级结构切换（比如整页从单列变三列） -
@container控制组件级细节适配（比如同一个卡片，在侧边栏里堆叠，在主区里横排） - 它们可以共存，但不能嵌套：不能在
@media块里写@container，也不能反过来 - 单位也不同：
@container只支持px、vw、%（仅当容器自身宽度明确时才可靠），不支持em、rem
-
