CSS Container Queries 通过 container-type 和 container-name 实现容器级响应式，避免 ResizeObserver 抖动；需在容器声明 inline-size 类型与名称，子元素用 @container 配合自定义属性断点精准控制样式。
直接用 CSS Container Queries（CQ）配合 container-type 和 container-name，就能让组件根据自身容器宽度响应，彻底绕开 ResizeObserver 脚本——这是减少嵌套 DOM 中 resize 抖动最根本的解法。
用 container-type: inline-size 替代 JS 监听
在需要响应式行为的最外层容器上声明：
.card-container {container-type: inline-size;
container-name: card;
}
之后所有子元素都可通过 @container card (width 写媒体查询，浏览器原生处理尺寸变化，不触发 JS 回调、无节流延迟、无 class 切换抖动。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须给容器显式设置
container-type，仅靠container-name不生效 - 避免在 flex 或 grid 容器内部再设 container-type，某些浏览器对嵌套 contain 支持不稳定
- 移动端 Safari 16.4+、Chrome 110+、Firefox 119+ 已稳定支持，可安全启用
断点值与 JS 方案严格对齐
如果项目中已有 ResizeObserver 脚本（如你提到的 cq-sm/cq-md 类逻辑），CSS 容器查询的断点必须完全一致：
width @container card (
width >= 400px and width @container card (
width >= 768px) { .card-title { font-size: 18px; } }
否则 JS 添加类和 CQ 规则同时生效，样式会冲突或闪烁。建议将断点抽成 CSS 自定义属性统一管理：
:root {--cq-sm: 400px;
--cq-md: 768px;
}
@container card (width
避免 contain: size 干扰 CQ 计算
Container Queries 依赖浏览器准确测量容器尺寸。若你在同一容器上误加了 contain: size，它会“锁死”尺寸预期，导致 CQ 无法响应真实变化——尤其当子内容动态增减时。
正确做法：
- 纯展示型卡片、固定高弹窗等尺寸绝对稳定的模块，可用
contain: layout paint加速 - 但只要容器内有文字折行、图片加载、下拉展开等尺寸不确定行为，就不要设
contain: size - 调试时用
getComputedStyle(el).contain检查是否意外启用了 size
嵌套容器需独立命名与查询
复杂 DOM 常有多个层级的响应式区域（如侧边栏里的列表项、主区里的网格卡片）。每个容器都要有自己的 container-name，不能共用：
.main-grid { container-type: inline-size; container-name: main; }
然后分别写：
@container sidebar (width @container main (width >= 1024px) { ... }这样各区域互不干扰，也不会因父容器 resize 导致子区域重复计算。
