CSS Container Queries 实战

Container Queries 在 2023 年得到主流浏览器支持。

基本用法

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

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

容器名称

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

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

响应式组件

<div class="container">
  <article class="card">
    <img src="..." />
    <h2>Title</h2>
    <p>Content...</p>
  </article>
</div>

小结

Container Queries 让组件真正实现响应式。