Container Queries + 现代 CSS：终于告别 Media Query 统治时代

Container Queries 的出现，让响应式设计从「页面响应式」正式进入「组件响应式」时代。

---

前言

这些年提到响应式设计，大家第一时间想到的几乎都是 Media Query。

@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}

它确实解决了很多问题。

但随着 Vue、React、Web Components 等组件化开发模式逐渐普及，一个新的问题开始出现：

组件真正关心的往往不是浏览器有多宽，而是自己所在的容器有多宽。

例如：

一个商品卡片组件可能同时出现在：

• 首页推荐区
• 用户中心侧边栏
• Dashboard 面板
• 弹窗内容区

虽然它们都是同一个组件，但实际可用宽度完全不同。

传统 Media Query 只能感知：

浏览器窗口宽度

却无法感知：

当前组件所在容器宽度

Container Queries 正是为了解决这个问题而诞生的。

---

Media Query 的局限性

假设我们有这样一个卡片组件：

<div class="card">
  <img src="cover.jpg" />
  <div class="content">
    <h3>标题</h3>
    <p>描述内容</p>
  </div>
</div>

桌面端布局：

.card {
  display: flex;
}

效果：

图片 | 内容

移动端布局：

@media (max-width: 768px) {
  .card {
    flex-direction: column;
  }
}

效果：

图片
内容

看起来没有问题。

但是如果这个组件出现在：

浏览器宽度：1920px

侧边栏宽度：280px

此时 Media Query 不会生效。

因为浏览器宽度仍然大于 768px。

结果组件被挤得面目全非。

---

什么是 Container Queries

Container Queries 允许组件根据父容器尺寸变化调整自身样式。

首先定义容器：

.wrapper {
  container-type: inline-size;
}

然后使用容器查询：

@container (max-width: 500px) {
  .card {
    flex-direction: column;
  }
}

此时判断条件不再是浏览器宽度。

而是：

当前容器宽度

这意味着同一个组件可以在不同区域拥有不同布局。

真正实现：

组件在哪里，就适配到哪里。

---

Container Queries 工作原理

1. 声明容器

最简单写法：

.container {
  container-type: inline-size;
}

含义：

允许根据宽度进行容器查询

---

2. 编写查询规则

@container (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

当容器宽度小于：

600px

规则生效。

---

3. 给容器命名

大型项目推荐命名：

.sidebar {
  container-name: sidebar;
  container-type: inline-size;
}

使用：

@container sidebar (max-width: 400px) {
  .menu {
    display: none;
  }
}

这样维护性更高。

---

实战案例：自适应商品卡片

HTML：

<div class="product-wrapper">
  <div class="product-card">
    <img src="product.jpg" />
    <div class="content">
      <h3>MacBook Pro</h3>
      <p>Apple M4 芯片</p>
    </div>
  </div>
</div>

CSS：

.product-wrapper {
  container-type: inline-size;
}

.product-card {
  display: flex;
  gap: 20px;
}

.product-card img {
  width: 200px;
}

@container (max-width: 500px) {
  .product-card {
    flex-direction: column;
  }

  .product-card img {
    width: 100%;
  }
}

效果：

宽容器：

图片 | 内容

窄容器：

图片
内容

无需关心页面整体宽度。

---

Container Query Units

Container Queries 还带来了全新的单位系统。

---

cqw

Container Query Width

font-size: 5cqw;

表示：

容器宽度的 5%

如果容器宽度：

600px

那么：

5cqw = 30px

---

cqh

Container Query Height

height: 50cqh;

表示：

容器高度的 50%

---

cqi

Container Query Inline

font-size: 4cqi;

适配不同书写方向。

---

cqb

Container Query Block

padding: 5cqb;

根据 Block 方向尺寸计算。

---

:has() —— CSS 选择器革命

如果说 Container Queries 是响应式革命。

那么：

:has()

就是选择器革命。

---

以前：

.form-group .error

只能向下查找。

现在：

.form-group:has(.error)

直接选中父元素。

---

例如：

<div class="form-item">
  <input required />
</div>

.form-item:has(input:invalid) {
  border: 1px solid red;
}

效果：

输入框校验失败
↓
父元素自动高亮

无需 JavaScript。

---

Subgrid —— Grid 的最后一块拼图

过去：

display: grid;

虽然强大。

但嵌套 Grid 很难保持统一。

例如：

标题
内容
按钮

多个卡片高度不一致。

---

现在：

.card {
  display: grid;
  grid-template-rows: subgrid;
}

子元素直接继承父 Grid。

实现：

所有卡片统一对齐

特别适合：

• 数据看板
• 商品列表
• CMS 系统

---

CSS Nesting —— 原生嵌套

以前：

.card {}

.card .title {}

.card .title:hover {}

写久了非常痛苦。

---

现在浏览器已经支持：

.card {
  .title {
    color: #333;

    &:hover {
      color: blue;
    }
  }
}

效果类似 Sass。

但无需编译器。

---

与 Tailwind CSS 结合使用

Tailwind 4 已支持容器查询。

示例：

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    ...
  </div>
</div>

解释：

容器达到 md

flex-row

容器小于 md

flex-col

对于组件库开发非常方便。

---

在 Vue 项目中的应用

对于 Vue3 项目：

例如后台管理系统：

用户管理
订单管理
数据分析
系统设置

每个模块宽度不同。

以前：

@media

很难维护。

现在：

@container

每个组件自己管理自己的响应式规则。

组件独立性更强。

---

浏览器兼容性

截至 2026 年：

主流浏览器已经全面支持：

• Chrome
• Edge
• Firefox
• Safari

企业项目基本可以直接使用。

无需担心兼容问题。

---

什么时候应该使用 Container Queries

推荐：

✅ Dashboard
✅ 企业后台
✅ 低代码平台
✅ 组件库
✅ 拖拽布局系统
✅ 数据可视化系统

---

不推荐：
❌ 简单官网
❌ 活动页
❌ 老旧浏览器项目
❌ 仅有单一布局的网站

---

总结

过去十年：

@media

主导了整个响应式设计领域。

但它本质上解决的是：

页面响应式

而不是：

组件响应式

Container Queries 的出现让 CSS 真正进入组件时代。

如果说：

• Flex 改变了一维布局
• Grid 改变了二维布局
• CSS Variables 改变了主题系统

那么：

Container Queries 正在改变响应式设计本身。

未来几年，无论是 React、Vue 还是 Web Components，组件级响应式都会逐渐成为主流方案。

对于现代前端开发者来说：

学会 Container Queries，不只是学习一个新特性，而是在学习下一代 CSS 的设计思想。