容器查询

1. 容器查询概述

容器查询允许根据父容器的尺寸而非视口尺寸应用样式。

2. 基本用法

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

@container card (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

@container card (min-width: 200px) and (max-width: 399px) {
  .card {
    display: block;
  }
}

3. container-type

4. 样式查询

.card-container {
  --theme: dark;
}
@container style(--theme: dark) {
  .card {
    background: #1a1a1a;
    color: white;
  }
}