<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.