我要投稿

CSS容器查询革命：组件级自适应布局新范式

文章小助手 css

2025-07-13 0 944

CSS容器查询革命：组件级自适应布局新范式

一、容器查询核心原理

突破传统媒体查询的组件级响应方案：

/* 定义容器上下文 */
.component {
  container-type: inline-size;
  container-name: component-container;
}

/* 基于容器宽度的样式调整 */
@container component-container (min-width: 400px) {
  .card {
    grid-template-columns: 120px 1fr;
  }
  
  .title {
    font-size: 1.25rem;
  }
}

@container component-container (min-width: 600px) {
  .card {
    grid-template-columns: 1fr;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  .title {
    font-size: 1.5rem;
  }
}

/* 容器相对单位 */
.price {
  font-size: clamp(1rem, 3cqw, 1.5rem);
}

核心优势：组件自治、布局精确控制、代码解耦、维护性提升

二、高级应用模式

1. 卡片组件自适应

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

/* 窄版布局 */
.product-card {
  display: flex;
  flex-direction: column;
}

/* 中等宽度调整 */
@container (min-width: 350px) {
  .product-card {
    flex-direction: row;
    gap: 1rem;
  }
  
  .product-image {
    width: 120px;
  }
}

/* 宽版布局优化 */
@container (min-width: 500px) {
  .product-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
  }
  
  .product-actions {
    grid-column: span 2;
  }
}

2. 表单布局优化

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

.form-group {
  margin-bottom: 1rem;
}

/* 水平表单布局 */
@container (min-width: 400px) {
  .form-group {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.5rem;
    align-items: center;
  }
  
  label {
    text-align: right;
  }
}

/* 复杂表单布局 */
@container (min-width: 700px) {
  .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .form-actions {
    grid-column: span 2;
    justify-self: end;
  }
}

三、创意布局实战

1. 响应式媒体对象

.media-object {
  container-type: inline-size;
  display: flex;
  gap: 1rem;
}

.media-image {
  flex: 0 0 80px;
}

/* 中等布局调整 */
@container (min-width: 300px) {
  .media-image {
    flex-basis: 120px;
    align-self: flex-start;
  }
  
  .media-content {
    display: grid;
    grid-template-columns: subgrid;
  }
}

/* 宽版布局优化 */
@container (min-width: 500px) {
  .media-object {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
  }
  
  .meta-info {
    display: flex;
    justify-content: space-between;
  }
}