container-type 必须显式声明，否则 @container 规则不生效；最常用的是 inline-size，size 同时启用宽高查询但开销大，normal 或未声明则关闭容器查询；Flex/Grid 父容器上直接设置无效，需额外 wrapper 并注意宽度坍缩；Tailwind 需用 @tailwindcss/container-queries 插件；@container 中禁用 em/rem，仅支持 px、vw（需容器有明确 width）、%（需父容器宽度确定），推荐统一用 px。
container-type 必须显式声明，否则 @container 规则不生效
很多开发者写了 @container 却没效果，第一反应是浏览器兼容性问题，其实 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更容易预估实际可用宽度
Tailwind CSS 用户该用 @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') - 用法类似媒体查询前缀：
[@media](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media) (min-width: 768px)→[@lg](https://tailwindcss.com/docs/container-queries#using-the-container-query-breakpoints)，但底层是真实容器查询，不是视口断点 - 插件默认提供
sm/md/lg三档，对应inline-size值，可在theme.containerQueries中自定义
@container 规则里不能用 em/rem，单位必须可控
容器查询的尺寸条件不接受 em、rem 这类依赖根字体或继承链的相对单位。浏览器无法在容器尺寸变化时可靠地反推这些值，所以会静默忽略整条规则。
立即学习“前端免费学习笔记（深入）”；
- 只支持
px、vw（注意：仅当容器本身有明确width时才安全）、%（同样依赖父容器有确定宽度） - 推荐统一用
px，语义清晰，调试直观，也和设计稿标注一致 - 组合条件写法：
@container (inline-size > 400px) and (block-size ，但 <code>block-size使用频率极低，多数组件只需关注宽度 -
@container不能嵌套在@media内部，但两者可以并存：一个管页面结构，一个管组件行为
position: absolute、float、display: inline 或 Flex/Grid 算法吃掉宽度，查询就归零。动手前先 inspect 元素的 computed width，比反复改 @container 条件有用得多。 
