<div class="post">
  <div class="card">
    <h2>标题</h2>
  </div>
</div>
.post {
  container-type: inline-size;
}

/* 默认的卡片标题样式 */
.card h2 {
  font-size: 18px;
}

/* 如果容器宽度大于1200px */
@container (min-width: 960px) {
  .card h2 {
    font-size: 36px;
  }
}


/* 如果容器宽度大于1200px */
@container (min-width: 1200px) {
  .card h2 {
    font-size: 48px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.