@container 规则必须先声明父元素为可查询容器才生效，最常见失效原因是未设置 container-type；命名容器可避免样式污染，兼容性需用 @supports 检测。
能直接用，但必须先让父元素成为“可查询容器”，否则 @container 规则完全不生效。
为什么 @container 什么都没反应？
最常见原因是没声明容器。CSS 容器查询不是开箱即用的——它要求你显式标记哪个元素是“容器”。浏览器不会自动把任意父元素当成查询上下文。
-
container-type: inline-size是最低门槛，只启用基于宽度的查询（绝大多数场景够用） -
container-type: size同时启用宽高查询，但性能开销略大，且部分旧版 Safari 对 height 查询支持不稳定 - 如果省略
container-name，就只能用匿名容器语法@container (min-width: 400px)，但多个同级容器会互相干扰 - 不要在
display: contents或position: absolute的父元素上设容器——它们不产生布局盒，container-type会被忽略
@container 和 @media 能混用吗？
能，但逻辑完全不同：前者作用于容器尺寸，后者作用于视口尺寸，两者互不嵌套、互不影响。
- 可以同时写
@media (min-width: 1200px) { @container card (min-width: 500px) { ... } }，但注意内层@container仍只响应其直接父容器，不是响应 1200px 视口 - 不要试图用
@container替代所有@media：导航栏折叠、字体缩放、深色模式切换等仍需媒体查询 - 当组件被嵌套多层时，确保你查询的是**最近的、已声明为容器的祖先**，而不是隔了几层的“真正父级”
怎么写才真正复用？命名容器的关键细节
命名容器（container-name: card）不是锦上添花，而是避免样式污染的核心手段。
- 多个相同结构的卡片并列时，如果不命名，
@container (min-width: 400px)会匹配所有卡片容器，导致小卡片也触发大屏样式 - 命名后写成
@container card (min-width: 400px)，就只作用于明确标了container-name: card的那个容器 - 命名支持空格分隔，如
container-name: card sidebar，后续可用@container card或@container sidebar单独查询 - 命名区分大小写，
card和Card是两个不同容器
兼容性和 fallback 怎么处理？
Chrome 105+、Firefox 110+、Safari 16+ 已全平台支持，但 IE 和旧 Android WebView 仍需降级。
- 用
@supports (container-type: inline-size)包裹容器查询代码，老浏览器直接跳过 - 不要依赖 JavaScript 检测：CSS 自身的
@supports更轻量、更可靠 - 降级方案不是“回退到媒体查询”，而是提供一套默认静态样式——比如卡片始终垂直排布，
@container只负责“变宽时横排”，而非从零构建布局 - 服务端渲染（SSR）场景下，注意容器尺寸在首次渲染时不可知，
@container规则是纯客户端计算的，无需 SSR 特殊处理
真正难的不是写对语法，而是判断“这个组件到底该由谁来当容器”——有时候是 div，有时候是 section，甚至可能是 slot 的宿主元素。选错容器层级，样式就会失效或误触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
