CSS 容器查询:响应式设计新纪元

C

CSS工程师

2个月前

CSS 容器查询:响应式设计新纪元

CSS响应式设计容器查询

CSS 容器查询完全指南

响应式设计的新纪元。

1. 基础语法

css
.card-container {


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




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

2. 容器查询 vs 媒体查询

css
/ 媒体查询 - 基于视口 /


@media (min-width: 768px) { }




/ 容器查询 - 基于容器 /
@container (min-width: 400px) { }

3. 容器查询单位

css
.element {


font-size: 5cqi;  / 容器内联尺寸的 5% /
padding: 2cqb;    / 容器块尺寸的 2% /
}

4. 结合 :has() 选择器

css
/ 当容器包含图片时 /


.card:has(img) {
display: grid;
grid-template-columns: 200px 1fr;
}

5. 实战示例

css
.product-grid {


container-type: inline-size;
}




@container (min-width: 600px) {
.product-card {
grid-template-columns: repeat(2, 1fr);
}
}




@container (min-width: 900px) {
.product-card {
grid-template-columns: repeat(3, 1fr);
}
}

2.6k 阅读