容器查询生效需显式声明 container-type（如 inline-size），否则 @container 无效；单位仅支持 px/em/rem，禁用 vw/%/calc()/变量插值；多条件用空格分隔；SCSS 无法用 @content 封装 @container；降级需结合传统媒体查询而非仅 @supports。
SCSS 本身不处理容器查询逻辑，它只是编译器；真正起作用的是你在 SCSS 中写的 @container 规则和 container-type 声明——但写法稍有不慎，编译后就完全失效，且浏览器不会报错，排查起来特别隐蔽。
必须显式声明 container-type，否则 @container 彻底无效
这是最常踩的坑：很多人写了 @container (min-width: 400px) { ... }，但父元素没加 container-type: inline-size，结果样式死活不生效。SCSS 不会校验这个依赖关系，编译照常通过，运行时静默失败。
-
container-type: inline-size足够覆盖 95% 场景（查容器宽度）；size同时查宽高，但兼容性略差，Chrome 110+ / Safari 16.4+ 才稳定支持 - 命名容器更安全：
container-name: card或简写container: card / inline-size，避免嵌套时@container匹配到错误层级 - 别在 Flex/Grid 容器上直接设
container-type，除非你确认它的尺寸是确定的——比如width: 300px或flex: 0 0 300px；否则容器尺寸为auto，查询条件永远不满足
@container 断点只认 px、em、rem，vw 和 % 直接被忽略
和媒体查询不同，容器查询的尺寸基准是容器自身，不是视口，所以 vw、% 这类单位在 @container 里会被解析为无效值，整条规则作废。
- 正确写法：
@container (min-width: 24em)或@container card (width >= 320px) - 别用
clamp()、calc()或变量插值生成带单位的表达式，比如@container (min-width: #{$breakpoint-sm})—— 若$breakpoint-sm是纯数字（如320），编译后变成min-width: 320，缺单位即无效 - 多条件用空格分隔：
@container (min-width: 400px) and (max-width: 768px)，不能用逗号或&&
SCSS 中封装容器查询需绕开 @content 陷阱
你不能像封装媒体查询那样，用 @mixin container-query($min, $max) + @content 来抽象 @container——因为 @container 是 CSS at-rule，SCSS 的 @content 机制无法注入 at-rule，编译会报错或静默丢弃。
立即学习“前端免费学习笔记（深入）”；
- 可行做法：用
@function生成带单位的断点值，再手写@container块，例如：@function cq-min($px) { @return #{$px}px; } @container (min-width: cq-min(400)) { .card { flex-direction: row; } } - 更实用的是配合命名容器做语义化组织：
.card-wrapper { container: card / inline-size; }，然后所有相关查询都用@container card (...)，便于全局搜索和维护 - 如果项目大量使用，建议把容器声明和查询拆成两个 SCSS 文件：
_containers.scss（只放container-type声明）和_cq-styles.scss（只放@container规则），避免混在一起难以定位
旧浏览器兜底不能只靠 @supports
@supports (container-type: inline-size) 只能检测语法支持，但 Safari 16.4 之前、Firefox（截至 2026 年仍需手动开启实验标志）、以及所有 IE/Edge Legacy 都不支持。单纯用 @supports 包裹 @container，等于没降级。
- 真正可用的降级方式：默认写桌面态样式（如
.card { display: flex; }），再用传统媒体查询回退到移动端布局：@include respond-to("sm") { .card { display: block; } } - 不要试图在同一个选择器里同时写
aspect-ratio和padding-top，也不要混合@container和@media在同一区块——它们逻辑层级不同，容易互相覆盖或被忽略 - 最关键的一点：容器查询生效的前提是容器尺寸可测量。如果你的容器高度由内容撑开、又没设
min-height或height，那container-type: size查询可能永远不触发
