@container不生效的首要原因是父元素未显式声明container-type: inline-size；必须手动设置，不可继承或隐式触发，调试需用DevTools Layout面板勾选“Container queries”确认识别状态。
@container不生效？先检查父元素有没有container-type
绝大多数人写完@container (min-width: 400px)发现完全没反应，不是语法错，也不是浏览器不支持，而是父容器压根没被识别为容器。CSS不会自动把任意有宽度的div当作查询目标——必须显式声明container-type: inline-size（最常用）或container-type: size。
常见错误现象：
- 在
.card上写了@container规则，但它的父级.card-wrapper没设container-type - 误以为
display: flex或width: 100%能“隐式”启用容器查询 - 给
或直接加container-type，但它们默认不具备 layout containment，实际无效
调试建议：
- 打开 Chrome DevTools → Layout 面板 → 勾选 “Container queries”，立刻看到哪些元素被识别为容器
- 用
container: card / inline-size代替分开写两个属性，更简洁且不易漏 - 避免用
display: inline的元素当容器，推荐display: flow-root或block
为什么推荐用container-name而不是匿名@container
匿名@container (max-width: 360px)会匹配页面中**任意一个**带container-type的祖先，一旦多个卡片组件共存（比如.card和.promo-card），样式极易互相污染。
使用命名容器可精准锚定作用域：
- 在容器上写
container-name: card（或简写container: card / inline-size） - 查询时写
@container card (min-width: 400px)，只影响该类卡片 - 名字区分大小写、不能含空格；多个名字用空格分隔，如
container-name: card featured - 同一元素重复设置相同 name 会被后者覆盖，JS 动态多次
setAttribute会出问题
典型场景：CMS 页面里动态插入不同类型的区块，命名是避免样式越界最轻量的手段。
@container里的min-width到底比什么？不是CSS width值
@container (min-width: 320px)判断的是容器的「可用内联尺寸」（inline-size available space），也就是 content box 的实际宽度，受padding、border、box-sizing直接影响，和你在样式里写的width无关。
举例：
- 容器设了
width: 352px; padding: 16px; box-sizing: border-box→ content box 宽 = 352 − 32 = 320px → 此时min-width: 320px才匹配 - 若容器
width是auto或由内容撑开，可用宽度就是其实际内容区宽度 - 单位只认
px、vw、%（仅当父容器有明确尺寸时）、ch；em在容器查询中行为未定义，应避免
容易踩的坑：用媒体查询思维去猜断点，结果发现切换时机总差几十像素——八成是忘了减去内边距。
和@media共存时怎么不打架？关键在职责分离
@media和@container是两套完全独立的机制：@media看视口，@container看父容器。它们没有优先级，但混用时容易因触发条件不同导致意外交互。
推荐配合方式：
- 用
@media控制整体布局结构（比如桌面端显示侧边栏，移动端折叠为 hamburger） - 用
@container card控制卡片内部细节（图片横/竖排、标题字号、元信息显隐） - 绝对不要把同一类样式同时塞进两者，例如都写
.card { display: flex }，否则容器窄而视口宽时行为不可预测 - 调试时可临时加
outline: 1px solid red到容器元素，肉眼确认当前生效的是哪个查询上下文
兜底逻辑必须用@supports not (container-type: inline-size)包裹@media回退，不能只靠 caniuse 的全局支持率——Firefox 对container-type: size的 height 部分仍不稳定，但inline-size在 Chrome 110+ / Safari 16.4+ / Firefox 119+ 已稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
