CSS容器查询：响应式设计的新范式

引言

在响应式设计的发展历程中，我们长期依赖媒体查询来根据视口大小调整布局。然而，现代Web应用的组件化特性使得基于视口的响应式设计显得力不从心。CSS容器查询的出现，为我们提供了一种基于容器尺寸而非视口尺寸的响应式设计新范式。本文将深入探讨CSS容器查询的核心概念、实际应用和最佳实践。

容器查询基础

1. 什么是容器查询

容器查询允许我们根据元素的容器尺寸来应用样式，而不是整个视口。这使得组件能够根据其所在容器的大小自适应调整，真正实现组件级别的响应式设计。

/* 定义容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 使用容器查询 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

2. 容器查询的基本语法

容器查询的语法与媒体查询类似，但使用@container规则。

/* 定义容器 */
.sidebar {
  container-type: inline-size;
}

/* 容器查询示例 */
@container (min-width: 300px) {
  .widget {
    flex-direction: row;
  }
}

@container (min-width: 500px) {
  .widget {
    padding: 20px;
  }
}

容器类型与命名

3. 容器类型详解

CSS提供了两种容器类型：size和inline-size。

/* size容器 - 同时跟踪内联和块级尺寸 */
.gallery {
  container-type: size;
}

/* inline-size容器 - 只跟踪内联尺寸（推荐） */
.card-wrapper {
  container-type: inline-size;
}

/* 为什么推荐inline-size */
/* 1. 性能更好：浏览器只需要跟踪一个维度 */
/* 2. 避免循环依赖：减少布局计算复杂度 */

4. 容器命名

为容器命名可以创建更精确的查询规则。

/* 定义命名容器 */
.main-content {
  container-type: inline-size;
  container-name: main;
}

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

/* 针对不同容器的查询 */
@container main (min-width: 600px) {
  .article {
    font-size: 18px;
  }
}

@container side (min-width: 300px) {
  .widget {
    display: block;
  }
}

实际应用案例

5. 响应式卡片组件

创建一个根据容器大小自适应的卡片组件。

/* 卡片容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 基础卡片样式 */
.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 小容器 - 垂直布局 */
@container card (max-width: 300px) {
  .card {
    display: flex;
    flex-direction: column;
  }
  
  .card-image {
    width: 100%;
    height: 150px;
  }
  
  .card-content {
    margin-top: 12px;
  }
}

/* 中等容器 - 水平布局 */
@container card (min-width: 301px) and (max-width: 500px) {
  .card {
    display: flex;
    flex-direction: row;
    gap: 16px;
  }
  
  .card-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
  }
}

/* 大容器 - 网格布局 */
@container card (min-width: 501px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
  }
  
  .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}

6. 自适应导航菜单

创建一个根据可用空间调整的导航菜单。

/* 导航容器 */
.nav-container {
  container-type: inline-size;
  container-name: nav;
}

/* 基础导航样式 */
.nav {
  display: flex;
  gap: 8px;
}

.nav-item {
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.2s;
}

/* 窄容器 - 垂直菜单 */
@container nav (max-width: 400px) {
  .nav {
    flex-direction: column;
  }
  
  .nav-item {
    width: 100%;
    text-align: center;
  }
}

/* 中等容器 - 紧凑水平菜单 */
@container nav (min-width: 401px) and (max-width: 600px) {
  .nav-item {
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* 宽容器 - 完整菜单 */
@container nav (min-width: 601px) {
  .nav {
    justify-content: space-between;
  }
  
  .nav-item {
    padding: 10px 20px;
  }
}

7. 响应式数据表格

创建一个根据容器宽度调整的表格。

/* 表格容器 */
.table-container {
  container-type: inline-size;
  container-name: table;
  overflow-x: auto;
}

/* 基础表格样式 */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

/* 窄容器 - 紧凑表格 */
@container table (max-width: 500px) {
  .data-table th,
  .data-table td {
    padding: 8px;
    font-size: 14px;
  }
  
  .data-table .description {
    display: none;
  }
}

/* 中等容器 - 标准表格 */
@container table (min-width: 501px) and (max-width: 800px) {
  .data-table th,
  .data-table td {
    padding: 10px 14px;
  }
}

/* 宽容器 - 宽松表格 */
@container table (min-width: 801px) {
  .data-table th,
  .data-table td {
    padding: 16px 20px;
  }
  
  .data-table {
    font-size: 16px;
  }
}

高级技巧

8. 容器查询单位

使用容器查询单位（cqw、cqh、cqmin、cqmax）创建相对尺寸。

.product-card {
  container-type: size;
  container-name: product;
}

/* 使用容器查询单位 */
@container product {
  .product-image {
    width: 50cqw;  /* 容器宽度的50% */
    height: 30cqh; /* 容器高度的30% */
  }
  
  .product-title {
    font-size: 2cqw;  /* 相对于容器宽度的字体大小 */
  }
  
  .badge {
    width: min(10cqw, 100px);  /* 结合min()函数 */
    height: min(10cqw, 100px);
  }
}

9. 嵌套容器查询

在嵌套结构中使用多层容器查询。

/* 外层容器 */
.dashboard {
  container-type: inline-size;
  container-name: dashboard;
}

/* 内层容器 */
.widget {
  container-type: inline-size;
  container-name: widget;
}

/* 外层容器查询 */
@container dashboard (min-width: 800px) {
  .dashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
  }
}

/* 内层容器查询 */
@container widget (min-width: 300px) {
  .widget-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

10. 容器查询与JavaScript结合

使用JavaScript动态控制容器查询。

// 检测容器查询支持
class ContainerQueryDetector {
  constructor() {
    this.supported = CSS.supports('container-type', 'inline-size');
  }
  
  init() {
    if (!this.supported) {
      this.loadPolyfill();
    }
  }
  
  loadPolyfill() {
    // 加载容器查询polyfill
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/container-query-polyfill';
    document.head.appendChild(script);
  }
  
  // 动态设置容器
  setContainer(element, name, type = 'inline-size') {
    if (this.supported) {
      element.style.containerType = type;
      element.style.containerName = name;
    } else {
      // 回退方案
      element.classList.add(`container-${name}`);
    }
  }
}

// 使用示例
const detector = new ContainerQueryDetector();
detector.init();

// 动态创建容器
const cardContainer = document.querySelector('.card-container');
detector.setContainer(cardContainer, 'card');

性能优化

11. 容器查询性能考虑

容器查询的性能优化策略。

/* 1. 优先使用inline-size而非size */
.efficient-container {
  container-type: inline-size; /* 更好的性能 */
}

/* 2. 避免过度嵌套 */
/* 不推荐 */
.outer {
  container-type: inline-size;
}
.middle {
  container-type: inline-size;
}
.inner {
  container-type: inline-size;
}

/* 推荐 - 扁平化结构 */
.outer {
  container-type: inline-size;
}

/* 3. 合并查询规则 */
/* 不推荐 */
@container (min-width: 300px) {
  .item { padding: 10px; }
}
@container (min-width: 300px) {
  .item { margin: 10px; }
}

/* 推荐 */
@container (min-width: 300px) {
  .item {
    padding: 10px;
    margin: 10px;
  }
}

12. 渐进增强策略

为不支持容器查询的浏览器提供回退方案。

/* 基础样式 - 所有浏览器 */
.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* 媒体查询回退 */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

/* 容器查询 - 现代浏览器 */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

实际项目应用

13. 电商产品卡片

完整的电商产品卡片实现。

/* 产品卡片容器 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.product-card {
  container-type: inline-size;
  container-name: product;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 产品图片 */
.product-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

/* 产品信息 */
.product-info {
  padding: 16px;
}

.product-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.product-price {
  font-size: 18px;
  font-weight: 700;
  color: #e53e3e;
}

/* 容器查询变体 */
@container product (min-width: 300px) {
  .product-title {
    font-size: 18px;
  }
  
  .product-price {
    font-size: 20px;
  }
}

@container product (min-width: 400px) {
  .product-info {
    padding: 20px;
  }
  
  .product-title {
    font-size: 20px;
  }
  
  .product-description {
    display: block;
    margin-top: 8px;
    color: #666;
    font-size: 14px;
  }
}

14. 响应式文章布局

自适应的文章内容布局。

/* 文章容器 */
.article-wrapper {
  container-type: inline-size;
  container-name: article;
  max-width: 100%;
}

/* 文章内容 */
.article-content {
  line-height: 1.8;
  color: #333;
}

.article-content h2 {
  font-size: 24px;
  margin: 32px 0 16px;
}

.article-content p {
  margin-bottom: 16px;
}

/* 容器查询适配 */
@container article (max-width: 400px) {
  .article-content {
    font-size: 16px;
  }
  
  .article-content h2 {
    font-size: 20px;
  }
  
  .article-content img {
    width: 100%;
    height: auto;
  }
}

@container article (min-width: 401px) and (max-width: 700px) {
  .article-content {
    font-size: 17px;
  }
  
  .article-content h2 {
    font-size: 22px;
  }
  
  .article-content img {
    max-width: 100%;
  }
}

@container article (min-width: 701px) {
  .article-content {
    font-size: 18px;
    max-width: 650px;
    margin: 0 auto;
  }
  
  .article-content h2 {
    font-size: 26px;
  }
  
  .article-content img {
    max-width: 100%;
    border-radius: 8px;
  }
}

调试与测试

15. 容器查询调试工具

使用开发者工具调试容器查询。

// 容器查询调试器
class ContainerQueryDebugger {
  constructor() {
    this.containers = new Map();
  }
  
  // 注册容器
  registerContainer(element, name) {
    this.containers.set(name, element);
    this.addDebugOverlay(element, name);
  }
  
  // 添加调试覆盖层
  addDebugOverlay(element, name) {
    const overlay = document.createElement('div');
    overlay.style.cssText = `
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 2px dashed #ff6b6b;
      pointer-events: none;
      z-index: 9999;
    `;
    
    const label = document.createElement('div');
    label.textContent = name;
    label.style.cssText = `
      position: absolute;
      top: -20px;
      left: 0;
      background: #ff6b6b;
      color: white;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    `;
    
    overlay.appendChild(label);
    element.style.position = 'relative';
    element.appendChild(overlay);
    
    // 监听尺寸变化
    this.observeSize(element, name);
  }
  
  // 监听容器尺寸变化
  observeSize(element, name) {
    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        const { width, height } = entry.contentRect;
        console.log(`容器 ${name} 尺寸:`, {
          width: Math.round(width),
          height: Math.round(height)
        });
      }
    });
    
    resizeObserver.observe(element);
  }
}

// 使用示例
const debugger = new ContainerQueryDebugger();
debugger.registerContainer(
  document.querySelector('.card-container'),
  'card'
);

总结

CSS容器查询为响应式设计带来了革命性的变化：

核心优势

1. 组件级响应式：组件根据自身容器而非视口调整
2. 更好的复用性：组件在任何容器中都能正确显示
3. 减少媒体查询：不再依赖全局视口尺寸
4. 更精确的控制：基于实际可用空间调整布局

最佳实践

1. 优先使用inline-size：性能更好，避免循环依赖
2. 合理命名容器：提高代码可读性和维护性
3. 渐进增强：为旧浏览器提供回退方案
4. 性能优化：避免过度嵌套和冗余查询

应用场景

• 组件库开发：创建真正自适应的UI组件
• 复杂布局：多列、网格等灵活布局
• 内容适配：根据可用空间调整内容显示
• 响应式设计：替代或补充传统媒体查询

容器查询代表了CSS响应式设计的未来方向。随着浏览器支持的不断完善，它将成为现代Web开发的标准工具。开始在你的项目中使用容器查询，体验组件级响应式设计的强大能力！

---

本文首发于掘金，欢迎关注我的专栏获取更多前端技术干货！