容器查询需显式设置父容器的container-type: inline-size才能生效，不可直接在子元素上使用@container规则；应避免命名容器、嵌套过深及复用媒体查询断点，推荐定义专属尺寸阈值并结合grid/flex特性调整布局策略。
容器查询需要先启用容器尺寸检测
容器查询不是开箱即用的特性，必须显式给父容器设置 container-type 才能触发评估。只写 @container 规则而没设容器类型，样式永远不会生效。
常见错误是直接在 .card 或 .list-item 上写 @container (width > 400px) { ... }，但忘了它的父元素（比如 .grid）没声明 container-type: inline-size。
- 推荐做法：给布局容器加类名如
.cq-container，统一设置container-type: inline-size - 不要用
container-name——命名容器会增加耦合，且多数场景只需按尺寸响应 - 避免嵌套过深：三层以上容器查询可能引发多次 layout 重计算，性能敏感区域慎用
SCSS 中封装容器查询断点要避开媒体查询思维
别把容器查询当成“媒体查询换皮”，它不依赖视口，而是基于父容器的 inline-size（通常是 width）。因此 SCSS 变量和 mixin 设计逻辑要重来。
错误示范：复用媒体查询断点变量 $breakpoints: (sm: 576px, md: 768px)，然后写 @container (width > map-get($breakpoints, sm)) { ... }——这会让组件行为绑定到全局断点，失去容器查询本意。
- 应定义容器专属尺寸阈值，例如
$cq-sizes: (compact: 280px, mid: 420px, wide: 600px) - 写成函数更灵活：
@function cq-min($size) { @return map-get($cq-sizes, $size); } - 实际使用：
@container (width > cq-min(compact)) { .card__title { font-size: 1rem; } }
Grid + 容器查询组合时 fr 单位容易失效
当容器查询触发后修改了 Grid 轨道定义（比如从 grid-template-columns: 1fr 1fr 改为 1fr），fr 的协商算法会重新跑一遍，但此时容器宽度已变小，minmax() 中的最小值可能无法满足。
典型现象：卡片在窄容器中塌缩成一条线，文字挤成一团，即使写了 minmax(200px, 1fr) 也没用。
- 根本原因：容器查询重排时，浏览器不会“回溯”去重新检查
minmax约束是否仍成立 - 解法一：用
min-width配合grid-auto-flow: column替代纯fr布局 - 解法二：在容器查询内改用固定列数 +
repeat(auto-fit, minmax(...))，它比fr更健壮 - 务必测试
minmax(200px, 1fr)在最窄容器下的实际渲染宽度，别只看代码逻辑
Flex 与容器查询共存时注意 flex-shrink 默认值
Flex 项目默认 flex-shrink: 1，在容器变窄时会被压缩。这和容器查询“按容器尺寸切换布局”的意图冲突——你本想切到单列，结果项目被强行压扁还保持双列。
常见于侧边栏+主内容这种结构：当容器宽度降到 400px，你想让两个子项垂直堆叠，但它们还在 flex 行内被挤压。
- 必须显式重置：
@container (width * { flex-shrink: 0; } } - 别依赖
flex: 0 0 auto——它只控制基础尺寸，不阻止 shrink - 如果子项有固定宽高（如图标、头像），记得同时设
min-width: 0防止文本溢出破坏布局
容器查询真正难的不是语法，而是放弃“视口中心主义”——所有尺寸判断都要从父容器出发，连 fr 和 flex-shrink 这些看似底层的行为，都会因容器尺寸变化而表现异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
