如何从CSS Media Queries迁移到Container Queries

作者：袖梨 2026-08-07

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

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

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

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

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

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

@media (prefers-color-scheme: dark) —— 容器查询不处理系统偏好
@media (hover: hover) —— 与交互能力相关，非尺寸上下文
整页导航栏折叠/展开逻辑 —— 涉及全局 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，结果就是规则永远不触发。

实操建议：

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

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