CSS容器查询实战：新一代响应式布局方案

资深开发工程师 css

2025-07-29 0 666

CSS容器查询实战：新一代响应式布局方案

一、技术突破

容器查询使组件自适应能力提升200%，代码量减少40%

自适应卡片

根据容器尺寸自动调整布局

二、核心语法

1. 定义容器

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

/* 传统媒体查询 */
@media (min-width: 600px) {
    .card { /* 全局视口响应 */ }
}

/* 容器查询 */
@container card-container (min-width: 400px) {
    .card { /* 容器内响应 */ }
}

2. 多条件查询

@container (min-width: 300px) and (max-width: 500px) {
    .card {
        grid-template-columns: 1fr 2fr;
    }
}

@container (width > 500px) {
    .card {
        display: flex;
    }
}

三、实战案例

1. 自适应卡片组件

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

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

@container (min-width: 600px) {
    .card {
        grid-template-columns: 1fr;
        border-radius: 12px;
    }
}

2. 响应式导航菜单

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

.nav {
    display: flex;
    flex-direction: column;
}

@container (width > 500px) {
    .nav {
        flex-direction: row;
    }
    
    .nav-item {
        padding: 0 1rem;
    }
}

四、完整实现

容器查询卡片

根据父容器宽度自动调整布局样式

<!-- HTML结构 -->
<div class="card-wrapper">
    <div class="responsive-card">
        <img src="product.jpg" alt="">
        <div>
            <h3>产品名称</h3>
            <p>产品描述内容</p>
        </div>
    </div>
</div>

/* CSS容器查询 */
.card-wrapper {
    container-type: inline-size;
    container-name: card-wrapper;
}

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

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