@container没生效是因为父容器未显式声明container-type: inline-size（或size），且需有稳定可测宽度；单位推荐em/rem/%，禁用vw；须用@supports检测支持并提供媒体查询降级。
container: 为什么设了却没生效？
容器查询（Container Queries）不是媒体查询的平替，它依赖显式声明的容器作用域。常见错误是直接在 div 上写 container: inline-size 却没配 container-type —— 浏览器会完全忽略这条规则。
必须同时满足两个条件才能激活容器查询：
-
container-type设为inline-size（最常用）、size或normal -
container-name可选，但命名后能精准匹配，避免误触发 - 父容器需有明确尺寸约束（比如设置了
width、max-width，或被 Flex/Grid 项目限制了大小）
典型失效场景：把 container-type: inline-size 加在 <main></main> 上，而 <main></main> 是 display: block 且无宽度限制 —— 它的 inline-size 就是视口宽度，等价于媒体查询，容器查询机制不启动。
@container 规则里该用什么单位？
容器查询内部的 CSS 值，优先用相对单位：rem、em、%，慎用 px 和固定 vw。
立即学习“前端免费学习笔记（深入）”；
原因很实际：容器尺寸本身是动态的，如果在 @container (min-width: 300px) 里写死 font-size: 16px，那当容器缩到 280px 时字体不会变小，视觉比例就崩了。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
em相对于当前容器的font-size，适合做局部缩放（如卡片内文字随容器变小而减小） -
rem仍基于根元素，适合保持全局一致性（如按钮高度始终是 1.5rem） -
%在子元素宽高上表现稳定，比如img { width: 100% }在容器内始终填满
别在 @container 里用 vw —— 它锚定视口，和容器尺寸无关，会破坏响应逻辑。
和媒体查询混用时怎么避免冲突？
容器查询和媒体查询可以共存，但它们的触发条件不同：媒体查询看视口，容器查询看父容器。容易踩坑的是“双重缩放”—— 比如在 @media (max-width: 768px) 里把某区域设为 width: 100%，又在它的子容器上写 @container (min-width: 320px) 改字体，结果小屏下容器实际宽度可能只有 280px，@container 根本不触发。
- 建议分层：媒体查询管大结构（如从三栏变单栏），容器查询管局部组件（如卡片、列表项、表单控件）
- 调试时用浏览器开发者工具的 Layout 面板，勾选 “Show container queries”，能直观看到哪些容器已注册、当前匹配的断点
- 不要给同一个元素同时写
@media和@container控制同一属性（比如都调padding），优先级虽可预测，但维护成本高、易出错
移动端真机测试时要注意什么？
Chrome for Android 和 Safari on iOS（iOS 16.4+）支持容器查询，但旧版 Safari（包括大部分 iPadOS 16.3 及更早）不支持，且无降级提示。
实战中必须做两件事：
- 用
@supports (container-type: inline-size)包裹全部容器查询代码，确保不支持时自动跳过 - 对关键组件提供媒体查询 fallback：比如卡片在容器查询里设
@container (min-width: 280px) { font-size: 0.9rem; }，就在外层加@media (max-width: 480px) { .card { font-size: 0.9rem; } } - 真机测试重点看折叠屏（如 Galaxy Z Fold）—— 容器尺寸可能在展开/折叠瞬间突变，需检查是否出现布局抖动或样式未及时更新
容器查询真正的价值不在“替代媒体查询”，而在让组件真正自包含；但它的生效前提是容器有界、浏览器支持、降级路径清晰 —— 少一个，就容易变成看不见的 bug。
