容器查询需显式声明 container-type 才生效，常用 inline-size；Flex/Grid 父容器上直接设置无效，须在子元素外加 wrapper；尺寸基于 content box 计算，推荐用 px 单位；Tailwind 需插件支持，不可用视口断点模拟。
容器查询不是媒体查询的平替，它解决的是“组件在不同父容器中尺寸表现不一致”这个根本问题。只要父容器没声明 container-type，@container 规则就完全不会运行——这不是兼容性问题，而是前提缺失。
container-type 必须显式声明，否则 @container 无效
很多开发者写了 @container (min-width: 400px) 却没效果，第一反应是浏览器不支持，其实 90% 是漏了 container-type。它不是可选配置，而是硬性前提。
-
container-type: inline-size最常用，对应主轴方向（通常是宽度），适配绝大多数布局场景 -
container-type: size同时启用宽高查询，但开销更大，仅在需要block-size条件时才用 -
container-type: normal或未声明 = 容器查询彻底关闭，@container规则被浏览器忽略 - 不能只写
container-name，那只是个标识符，不触发任何查询能力
Flex/Grid 父容器上直接设 container-type 几乎总是失效
把 container-type: inline-size 直接加在 display: flex 或 display: grid 的父容器上，几乎总无效。原因很实在：Flex/Grid 的尺寸分配由算法动态计算，子项没有稳定、可测量的“自身宽度”，浏览器查不到值。
- 正确做法是：在 Flex/Grid 的直接子元素外再包一层
wrapper，并把container-type加在wrapper上 - 例如：
<div class="grid"><div class="card-wrapper" style="container-type: inline-size"><div class="card"></div></div></div> - 如果
wrapper是 flex item，记得加min-width: 0或width: fit-content，防止父级 flex 压缩导致宽度坍缩为 0 -
gap不计入inline-size计算，但padding和border会计入；用box-sizing: border-box更容易预估实际可用宽度
@container 中单位和尺寸计算逻辑与媒体查询不同
@container 的尺寸条件不是读取容器的 CSS width 值，而是基于其「可用的行内尺寸」（inline-size available space），也就是内容区实际宽度，受 padding、border、box-sizing 影响。
立即学习“前端免费学习笔记（深入）”；
-
min-width: 320px检查的是容器 content box 的可用宽度 ≥ 320px，不是offsetWidth或computedStyle.width - 若容器设了
padding: 16px和box-sizing: border-box，content box 宽度 = 样式width- 32px；样式width是 352px，content box 才刚好 320px - 只支持
px、vw（需容器有明确width）、%（需父容器宽度确定），推荐统一用px；em/rem在容器查询中行为未定义，应避免
Tailwind 用户必须装插件，不能靠原生类名模拟
原生 CSS 写 @container 没问题，但工程中更常见的是用 Tailwind。v3.2+ 的 @tailwindcss/container-queries 插件已稳定支持，且语法对齐标准，不是模拟方案。
- 安装命令：
npm install -D @tailwindcss/container-queries - 配置需在
tailwind.config.js的plugins数组里显式引入：require('@tailwindcss/container-queries') - 用法类似媒体查询前缀：
@lg:表示当容器宽度 ≥ 32rem 时生效；命名容器如@lg/main:可避免嵌套冲突 - 不要试图用
max-w-sm+md:max-w-md这类类名“模拟”容器查询，它们仍是视口断点，无法解决组件在侧边栏/弹层中错位的问题
真正容易被忽略的是渲染时机：React/Vue 组件挂载时，父容器尺寸可能尚未稳定（比如图片加载中、字体未就绪），导致 @container 初始匹配失败，后续才生效——这不是 bug，是容器查询依赖真实 layout 尺寸的必然结果。需要配合 resizeObserver 或 requestAnimationFrame 做兜底，或接受首次渲染的短暂不一致。
