用 @container 替代 @media，但必须先给父容器加 container-type: inline-size，否则查询不生效；需显式声明 containment context，支持 inline-size 和 size，命名可提升精准度与可维护性。
直接上结论：用 @container 替代 @media，但必须先给父容器加 container-type: inline-size，否则查询完全不生效。
为什么 @container 什么都不干？缺 containment context
这是最常踩的坑——写了 @container (max-width: 400px) { ... } 却毫无反应。根本原因不是语法错，而是浏览器压根没把那个父元素当成“可查询的容器”。
-
container-type必须显式声明，目前只支持inline-size（宽度）和size（宽高），block-size尚未广泛支持 - 不能写在
<body>或<main>这类语义化标签上——它们默认没有 layout containment，得靠 CSS 触发 - 避免套娃：如果父容器已设
container-type，子容器再设不会继承，但也不冲突 - 调试技巧：在 DevTools 的 Layout 面板里勾选 “Container queries”，能直观看到哪些元素被识别为 container
container-name 是可选的，但建议加上
名字本身不改变行为，但它让查询更可控、更易维护，尤其当一个页面有多个卡片类型时。
- 不命名也能用
@container (min-width: 300px)，但会匹配所有带container-type的祖先容器，容易误触发 - 命名后可精准定位：
@container card (max-width: 360px)只作用于container-name: card的容器 - 名字区分大小写，且不能含空格或特殊字符；多个名字用空格分隔，如
container-name: card featured - 注意：同一 DOM 元素不能重复设置相同 name，否则后者覆盖前者
和媒体查询混用时，优先级与执行逻辑
@container 和 @media 是两套独立机制，不存在“谁覆盖谁”，但它们的触发条件完全不同，容易产生意外交互。
立即学习“前端免费学习笔记（深入）”；
-
@media看视口，@container看父容器尺寸——哪怕视口很宽，只要卡片被塞进窄 sidebar，@container就会生效 - 两者可共存：比如用
@media控制整体布局断点（如 sidebar 折叠），再用@container控制卡片内部排版（如图片变横排/竖排） - 性能提示：频繁 resize 容器（如拖拽面板）会反复触发
@container计算，避免在其中写重绘开销大的样式（如box-shadow多层叠加） - 兼容性兜底：Safari 16.4+、Chrome 110+、Firefox 119+ 原生支持；旧浏览器需用
@supports not (container-type: inline-size)回退到@media
真正难的不是写对那几行 CSS，而是想清楚“这个组件到底该响应谁的尺寸”——是整个屏幕？还是它紧挨着的那个 <div class="panel">？一旦判断错了对象，再准的 @container 也救不回来。
