我要投稿

CSS容器查询深度实战：构建真正自适应的组件系统

文章小助手 css

2025-07-19 0 843

CSS容器查询深度实战：构建真正自适应的组件系统

一、容器查询 vs 媒体查询

特性	媒体查询	容器查询
响应依据	视口尺寸	容器尺寸
组件独立性	依赖全局布局	完全独立
复用性	上下文相关	上下文无关
支持情况	所有浏览器	Chrome/Safari/Firefox

二、自适应卡片组件实现

1. 容器定义与查询

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

/* 小容器样式 */
@container card-container (max-width: 400px) {
  .card {
    flex-direction: column;
  }
  .card-image {
    width: 100%;
    height: 120px;
  }
}

/* 中等容器样式 */
@container card-container (400px <= width < 800px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
    height: auto;
  }
}

/* 大容器样式 */
@container card-container (min-width: 800px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

2. 组件HTML结构

<div class="card-container">
  <article class="card">
    <img class="card-image" src="product.jpg" alt="">
    <div class="card-content">
      <h3>产品标题</h3>
      <p>描述内容...</p>
    </div>
  </article>
</div>

3. 容器查询与CSS变量结合

@container (min-width: 600px) {
  .card {
    --card-padding: 2rem;
    --title-size: 1.5rem;
  }
}

.card {
  padding: var(--card-padding, 1rem);
}

.card h3 {
  font-size: var(--title-size, 1.2rem);
}

三、高级应用技巧

1. 容器查询单位

.card {
  /* 基于容器宽度的单位 */
  width: 50cqw; /* 容器宽度的50% */
  padding: 2cqh; /* 容器高度的2% */
  font-size: clamp(1rem, 3cqi, 1.5rem); /* 容器内联尺寸的3% */
}

2. 嵌套容器查询

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

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

@container sidebar (width > 300px) {
  @container widget (width > 200px) {
    .widget-title {
      font-size: 1.5rem;
    }
  }
}