容器查询非媒体查询升级版，而是让组件样式响应自身容器尺寸的独立机制；需显式声明container-type（如inline-size）才生效，且不能设在Flex/Grid父元素上，须用wrapper包裹并注意宽度稳定性。
容器查询不是媒体查询的“升级版”，而是解决完全不同问题的机制：它让组件样式真正跟随自身容器变化，而不是被视口宽度绑架。只要浏览器支持（Chrome 105+、Firefox 110+、Safari 16+），现在就能在生产环境直接用。
container-type 必须显式声明，否则 @container 完全不生效
这是最常踩的坑——写了 @container (min-width: 400px) 却没效果，90% 是因为漏了 container-type。它不是可选装饰，是硬性开关。
-
container-type: inline-size是默认首选，覆盖 95% 场景（比如卡片宽度变化时调整布局） -
container-type: size同时监听宽高，会触发额外布局计算，仅在真需高度响应时用（如全屏轮播高度适配） -
container-type: normal或不写，等于关闭容器查询能力，@container规则会被浏览器静默忽略 -
container-name只是标识符，不能替代container-type；命名后可用@container card (min-width: 400px)精确匹配，但非必需
Flex/Grid 父容器上直接设 container-type 几乎总失效
把 container-type: inline-size 加在 display: flex 或 display: grid 的父元素上，样式大概率不触发。原因很实在：Flex/Grid 子项的尺寸由算法动态分配，浏览器查不到稳定可测的“自身宽度”。
- 正确做法是加一层 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更容易预估实际可用宽度
Tailwind 用户必须装 @tailwindcss/container-queries 插件
原生 CSS 写 @container 没问题，但工程中 Tailwind 是主流。v3.2+ 的 @tailwindcss/container-queries 插件已稳定支持，不是模拟方案，语法对齐标准。
立即学习“前端免费学习笔记（深入）”；
- 安装：
npm install -D @tailwindcss/container-queries - 配置：在
tailwind.config.js的plugins数组里显式引入require('@tailwindcss/container-queries') - 用法类似媒体查询前缀，例如：
[@container](https://developer.mozilla.org/zh-CN/)（注意括号需保留） - 插件支持
container-type的简写语法：container: card / inline-size
@container 中慎用 em/rem，推荐统一用 px
容器查询单位体系（cqw、cqi 等）虽新，但旧单位在容器上下文中行为受限：
-
em和rem在@container块内禁用，浏览器会忽略整条规则 -
vw能用，但依赖容器本身有明确width（否则无参照） -
%能用，但要求父容器宽度确定，否则计算结果不可控 - 最稳妥的是
px—— 直接、可预测、兼容性无死角；配合cqw（如font-size: 4cqw）也能实现流体缩放
真正难的不是语法，而是思维切换：别再想“这个组件在 768px 视口下怎么排”，而是问“它在自己容器宽度 ≥400px 时该怎么排”。一旦习惯这种粒度，组件复用和嵌套布局的混乱感就消失了。
