container queries 的核心区别在于监听父容器尺寸而非视口宽度，需显式声明 container-type（如 inline-size）且父容器须有明确尺寸约束，否则规则不生效。
Container Queries 和 media queries 的核心区别在哪？
@container 不是监听视口宽度，而是监听父容器的尺寸变化。卡片组件嵌在不同布局区域（比如侧边栏、主内容区、网格项）时，media queries 会给出同一套响应规则，而 @container 能让每张卡片“自己看自己容器有多大”，真正实现局部自适应。
- 容器必须显式声明
container-type（常用inline-size），否则@container规则完全不生效 - 父容器需有明确的尺寸约束（如
width、max-width、grid-template-columns），否则浏览器无法计算其内联尺寸 - 不要指望在
body或无宽高的div上直接设container——它不会触发查询
怎么给卡片组件正确设置 container 类型和名称？
卡片的直接父元素（比如 .card-wrapper）才是容器候选者，不是卡片本身。命名不是必须的，但加 container-name 可避免规则污染，尤其当多个卡片类型共存时：
.card-wrapper {
container-type: inline-size;
container-name: card;
}
-
container-type: inline-size覆盖 95% 场景（按宽度响应），size类型支持宽高双维度，但目前仅 Chromium 117+ 支持，Firefox / Safari 尚未跟进 -
container-name必须是标识符（不能含中划线或数字开头），且全局唯一；同名容器会共享同一套查询上下文 - 若卡片用
display: contents或被flex/grid直接包裹，父容器可能被绕过——此时需插入一层 wrapper 并设container
如何用 @container 编写卡片的断点样式？
写法和 @media 类似，但条件基于容器尺寸而非视口：
@container card (min-width: 300px) {
.card { flex-direction: column; }
}
@container card (min-width: 480px) {
.card { flex-direction: row; gap: 1rem; }
}
@container card (min-width: 640px) {
.card-image { width: 200px; }
.card-content { flex: 1; }
}
- 断点值推荐用
em或rem（相对字体大小），避免像素硬编码导致缩放失效 - 不要复制
media query的断点值（如768px）——容器宽度通常远小于视口，300–640px 更贴近实际 - 多条件组合可用
and，但or和not尚未被广泛支持（Chrome 122+ 开始实验性支持not）
常见失效原因和调试方法
最常遇到的是“写了 @container 却没反应”，基本可按以下顺序排查：
- 检查父容器是否真的渲染出了宽度：用 DevTools 的 Layout 面板看 computed
width是否大于 0 - 在父容器上右键 → “Inspect element”，查看 Styles 面板里是否有
container-type生效标记（Chrome 会显示小容器图标） - 控制台执行
getComputedStyle(document.querySelector('.card-wrapper')).containerType，返回空字符串说明未生效 - 确保 CSS 文件没有被禁用或加载失败——
@container规则不会触发任何警告，错误是静默丢弃的
容器查询真正难的不是语法，而是重构思维：你得把“卡片该长什么样”从全局布局决策，下沉到每个卡片自己对其容器的理解。一旦父容器尺寸不可控（比如由文本长度撑开），@container 就失去意义——这时候反而该用 min-content 或 fit-content 配合 resize 属性手动干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
