CSS系列（22）-- 容器查询详解

前端技术探索系列：CSS 容器查询详解 📦

致读者：探索组件级响应式设计 👋

前端开发者们，

今天我们将深入探讨 CSS 容器查询（Container Queries），这项新特性让我们能够基于容器大小而不是视口大小来创建响应式设计。

容器查询基础 🚀

定义容器

css 复制代码

/* 声明容器 */
.card-container {
    container-type: inline-size; /* 或 size, normal */
    container-name: card; /* 可选：命名容器 */
}

/* 简写语法 */
.card-container {
    container: card inline-size;
}

基础查询语法

css 复制代码

/* 基于容器宽度的样式 */
@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 1rem;
    }
}

/* 使用命名容器 */
@container card (max-width: 300px) {
    .card {
        flex-direction: column;
    }
}

/* 样式查询 */
@container style(--columns > 1) {
    .grid {
        grid-template-columns: repeat(var(--columns), 1fr);
    }
}

响应式组件设计 🎯

卡片组件

css 复制代码

/* 卡片容器 */
.card-wrapper {
    container-type: inline-size;
}

/* 响应式卡片 */
.card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

@container (min-width: 300px) {
    .card {
        flex-direction: row;
    }
    
    .card-image {
        width: 150px;
    }
    
    .card-content {
        flex: 1;
    }
}

@container (min-width: 500px) {
    .card {
        padding: 2rem;
    }
    
    .card-image {
        width: 200px;
    }
}

网格布局

css 复制代码

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

.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

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

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

@container (min-width: 1000px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

高级应用 💫

嵌套容器查询

css 复制代码

/* 主容器 */
.main-container {
    container-type: inline-size;
    container-name: main;
}

/* 子容器 */
.sub-container {
    container-type: inline-size;
    container-name: sub;
}

/* 主容器查询 */
@container main (min-width: 800px) {
    .layout {
        display: grid;
        grid-template-columns: 250px 1fr;
    }
}

/* 子容器查询 */
@container sub (min-width: 400px) {
    .widget {
        display: flex;
        gap: 1rem;
    }
}

组合查询

css 复制代码

/* 容器 + 媒体查询 */
@media (prefers-color-scheme: dark) {
    @container (min-width: 500px) {
        .card {
            background: #2a2a2a;
            color: #ffffff;
        }
    }
}

/* 多条件容器查询 */
@container (min-width: 300px) and (max-width: 500px) {
    .element {
        /* 样式 */
    }
}

兼容性处理 🛠️

特性检测

javascript 复制代码

class ContainerQuerySupport {
    static check() {
        return CSS.supports('container-type: inline-size');
    }

    static init() {
        if (this.check()) {
            document.documentElement.classList.add('cq-supported');
        } else {
            document.documentElement.classList.add('cq-not-supported');
        }
    }
}

// 回退样式
.cq-not-supported .card {
    /* 传统响应式样式 */
    @media (min-width: 768px) {
        /* 回退样式 */
    }
}

渐进增强

css 复制代码

/* 基础样式 */
.component {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 容器查询增强 */
@supports (container-type: inline-size) {
    .component-wrapper {
        container-type: inline-size;
    }
    
    @container (min-width: 400px) {
        .component {
            flex-direction: row;
        }
    }
}

实际应用示例 ⚡

响应式导航

css 复制代码

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

.nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@container (min-width: 600px) {
    .nav {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .nav-item {
        padding: 0.5rem 1rem;
    }
}

@container (min-width: 800px) {
    .nav {
        gap: 2rem;
    }
    
    .nav-item {
        padding: 1rem 2rem;
    }
}

自适应表单

css 复制代码

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

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

@container (min-width: 500px) {
    .form {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-field--full {
        grid-column: span 2;
    }
}

@container (min-width: 800px) {
    .form {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .form-field--full {
        grid-column: span 3;
    }
}

最佳实践建议 💡

设计策略
- 组件优先
- 逻辑分层
- 渐进增强
- 兼容处理
性能考虑
- 合理使用容器
- 避免过度嵌套
- 优化查询条件
- 减少重排影响
开发建议
- 模块化设计
- 清晰命名
- 文档完善
- 测试覆盖
最佳实践
- 语义化容器
- 响应式断点
- 回退方案
- 维护策略

写在最后 🌟

容器查询为组件级响应式设计带来了革命性的变化，让我们能够创建更灵活、更可复用的组件。

进一步学习资源 📚

容器查询规范
兼容性数据
实战案例
工具支持

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻