@container 用于组件响应父容器尺寸而非视口，需显式声明 container-type: inline-size 且父容器须有可计算宽度，断点仅支持 px/em/rem，safari 存在命名解析问题，应搭配 @media 降级。
@container 不是媒体查询的升级版，而是解决完全不同的问题：它让组件响应自身父容器尺寸，而不是视口宽度。在折叠屏、微前端、嵌套卡片等场景下，@media 会静默失效，而 @container 才是真解。
必须显式声明 container-type，否则 @container 完全不生效
浏览器默认不把任何元素当容器，漏掉这步，@container 规则会被静默丢弃，控制台不报错、也不警告——这是最常卡住人的地方。
-
container-type: inline-size是唯一推荐选项，查容器宽度；size和block-size支持差、性能开销大，别碰 - 不能加在
display: contents或position: absolute的父元素上——它们不产生块格式化上下文，属性直接被忽略 - 父容器得有可计算宽度：比如设置了
width、max-width，或在 Flex/Grid 中受约束；纯width: auto的 div 不触发查询
@container 断点只支持 px/em/rem，不支持 vw/%
容器查询的尺寸基于容器自身，不是视口，所以 vw、% 这类相对视口的单位在 @container 里直接被忽略，整条规则失效。
- 正确写法：
@container (min-width: 400px)或@container (min-width: 24em) - 不要用
clamp()或计算表达式，目前不支持 - 多条件用空格分隔：
@container (min-width: 400px) and (max-width: 600px)
命名容器在 Safari 16.4+ 有解析 bug，优先用匿名写法
Safari 对 container-name 的匹配不稳定，尤其在动态插入、SSR hydration 后容易命中失败。线上项目建议降级为匿名 + 类名选择器兜底。
- 推荐写法：
.card { container-type: inline-size; }+@container (min-width: 320px) { ... } - 避免嵌套多个
container-type: inline-size的容器；若必须嵌套，外层命名（如container-name: card），内层用其他方式控制样式 - 命名写法（如
@container card (min-width: 320px)）仅在 Chrome/Edge 110+ 稳定，Safari 建议回避
旧浏览器不支持时，降级方案不能只靠 @supports
@supports (container-type: inline-size) 能检测语法支持，但无法覆盖 Safari 16.4 的兼容性缺口，且 Firefox 仍需手动开启实验标志。静默失效不可靠，必须物理降级。
- 推荐做法：基础样式用
@container，再叠加一层@media (min-width: 768px)作为 fallback，两者职责分离——前者管组件，后者管全局布局 - 不要用
@import加载容器查询专用 CSS，它不支持媒体查询条件，且会无条件下载 - 移动端优先写法仍是主流：默认写紧凑态样式，
@container只负责“变宽后增强”，而非覆盖重写
container-type: inline-size，如果它是个 width: auto 且无约束的 div，查询永远不会触发。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
