如何从CSS Media Queries迁移到Container Queries

直接迁移@media到@container不可行，必须重审组件响应边界，将视口判断转为容器尺寸声明与查询，且仅当规则仅控制单个组件内部布局并与其父容器强相关时才可迁移。

直接迁移不可行——@media 和 @container 不是同一套逻辑，不能简单替换断点值或复制规则。必须重审组件的响应边界，把“视口尺寸判断”转为“容器尺寸声明+查询”。

哪些@media规则能直接改写成@container

仅当原规则只用于控制单个组件内部布局，且该组件的父容器尺寸与视口强相关（比如全宽卡片、主内容区模块），才具备迁移基础。典型可迁场景：

1. 卡片在侧边栏窄区域显示为单列，在主区域显示为双列
2. 仪表盘小部件根据格子宽度切换图标大小或隐藏次要信息
3. 表单字段组在弹层抽屉中自动压缩为垂直堆叠

但以下情况无法直接迁移：

1. @media (prefers-color-scheme: dark) —— 容器查询不处理系统偏好
2. @media (hover: hover) —— 与交互能力相关，非尺寸上下文
3. 整页导航栏折叠/展开逻辑 —— 涉及全局 DOM 结构，不是组件级自适应

container-type 必须显式声明，否则@container无效

这是最常被忽略的一步：@container 规则不会自动生效，浏览器必须知道哪个元素是“容器”。你得给父元素加 container-type: inline-size（最常用）或 container-type: size（监听宽高）。没有这行，@container 完全被忽略，连报错都没有。

常见错误写法：

.card-container {/* ❌ 缺少 container-type，下面的 @container 不会触发 */container-name: card;}
@container card (min-width: 400px) { .card { grid-template-columns: 1fr 2fr; } }

正确写法：

.card-container {container-type: inline-size;container-name: card;}
@container card (min-width: 400px) { .card { grid-template-columns: 1fr 2fr; } }

注意：container-name 是可选的；但如果你有多个同类型容器（比如多个 .sidebar 和 .main），就必须用名字区分，否则规则会交叉污染。

断点值不是“照搬视口断点”，而是测容器实际可用宽度

原来写 @media (min-width: 768px) 是因为设计稿标了“平板起始宽度”。但容器查询里，768px 很可能远超一个卡片容器的实际宽度——比如侧边栏卡片容器只有 320px 宽，主区域卡片容器是 680px。硬套 768px，结果就是规则永远不触发。

实操建议：

1. 用浏览器开发者工具选中目标容器，看 Computed → width 或用 getBoundingClientRect() 打印真实尺寸
2. 优先用相对单位（如 em、rem）或无单位数值（@container (min-width: 30em)），避免像素硬编码
3. 对 flex/grid 容器，注意 padding/margin/border 是否计入 inline-size —— 默认只算 content box 宽度，不含内边距

例如：一个带 padding: 1rem 的卡片容器，其 inline-size 是内容区宽度，不是外框总宽。若需包含内边距，得用 container-type: size 并配合 box-sizing: border-box 配合测试。

JavaScript 动态容器尺寸变化时，@container 自动响应，但contain属性会影响性能

@container 是纯 CSS 响应机制，只要容器尺寸变化（包括 JS 修改 width、插入子元素导致 reflow、resize observer 触发等），样式会自动重新计算。不需要手动刷新或监听。

但要注意：container-type 启用了 CSS Containment，浏览器会对该元素做布局隔离。这意味着：

1. 它不再参与外部文档流的尺寸计算（比如父元素高度不会由它撑开）
2. 它的子元素 position: absolute 的定位参考系仍是它自己，不是 viewport
3. 过度使用（比如给每个 div 都加 container-type）可能增加渲染开销，尤其在大量动态列表中

所以只在真正需要组件级响应的地方加，别图省事全局声明。

真正的难点不在语法，而在于识别出哪些组件真的“需要根据自身容器空间做决策”——这要求你暂时放下“页面整体断点”的惯性思维，回到组件本身去问：它在不同宽度下，视觉结构是否必须改变？如果答案是否定的，那它就不该用容器查询。