CSS Container Queries 应用：组件级响应式的真正实现
一、媒体查询的局限：响应的是视口，不是容器
传统响应式设计基于媒体查询（Media Queries），根据视口宽度调整布局。但组件的布局需求不是由视口决定的——一个卡片组件在宽屏侧边栏和窄屏主内容区需要不同的布局，即使视口宽度相同。媒体查询无法感知组件所在的容器宽度，导致组件只能在页面级别做响应式，无法实现真正的组件级响应式。
Container Queries 解决了这个问题。它允许组件根据其父容器的尺寸调整布局，而非根据视口。这意味着同一个卡片组件放在 300px 的侧边栏和 800px 的主内容区时，可以自动切换不同的布局模式，无需页面级别的媒体查询。
二、Container Queries 机制：容器查询与容器查询单位
Container Queries 的核心是两个概念：容器上下文（Container Context）和容器查询单位（Container Query Units）。容器上下文通过container-type声明，让子元素可以查询该容器的尺寸。容器查询单位（cqw、cqh）相对于容器尺寸计算，而非视口尺寸。
flowchart TB A[页面布局] --> B[侧边栏 300px] A --> C[主内容区 800px] B --> D[Card 组件<br/>容器宽度: 300px] C --> E[Card 组件<br/>容器宽度: 800px] D --> F{@container width < 400px} F -->|匹配| G[竖向布局<br/>图片在上，文字在下] E --> H{@container width >= 400px} H -->|匹配| I[横向布局<br/>图片在左，文字在右] subgraph 同一组件代码 J[.card<br/>@container 样式规则] end J --> D J --> E关键区别：Media Query 的断点基于视口，Container Query 的断点基于容器。同一个组件在不同容器中可以有不同的布局，这是组件级响应式的基础。
三、生产级代码实现：组件级响应式布局
3.1 基础容器查询
/* 声明容器上下文 */ /* 为什么用 inline-size 而非 size： inline-size 只查询行内方向（宽度）， 不查询块级方向（高度）；大多数响应式布局 只关心宽度变化，inline-size 性能更好， 因为不需要监听高度变化 */ .sidebar { container-type: inline-size; container-name: sidebar; } .main-content { container-type: inline-size; container-name: main; } /* Card 组件：根据容器宽度切换布局 */ .card { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 12px; background: var(--color-surface); } .card__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; } .card__content { display: flex; flex-direction: column; gap: 8px; } /* 容器宽度 >= 400px 时切换为横向布局 */ @container sidebar (min-width: 400px), main (min-width: 400px) { .card { flex-direction: row; align-items: center; } .card__image { width: 200px; aspect-ratio: 1; flex-shrink: 0; } } /* 容器宽度 >= 600px 时增强横向布局 */ @container main (min-width: 600px) { .card { padding: 24px; gap: 24px; } .card__image { width: 280px; } .card__title { font-size: 1.25rem; } }3.2 容器查询单位实现流式排版
/* 容器查询单位：相对于容器尺寸计算 */ /* 为什么用 cqw 而非 vw：vw 相对视口， 组件在不同容器中需要不同的字号； cqw 相对容器，字号随容器宽度自适应 */ .fluid-card { container-type: inline-size; } .fluid-card__title { /* 基础字号 + 容器宽度比例 */ /* 为什么用 clamp 而非纯 cqw： 纯 cqw 在极窄容器下字号过小不可读， 在极宽容器下字号过大不协调； clamp 设置上下限，保证可读性 */ font-size: clamp( 0.875rem, /* 最小值：14px */ 2cqw + 0.5rem, /* 首选值：容器宽度的 2% + 8px */ 1.5rem /* 最大值：24px */ ); line-height: 1.3; } .fluid-card__body { font-size: clamp( 0.8125rem, 1.5cqw + 0.375rem, 1rem ); } .fluid-card__spacing { /* 间距也用容器查询单位 */ padding: clamp(12px, 3cqw, 24px); gap: clamp(8px, 2cqw, 16px); }3.3 组件库中的容器查询封装
/* 组件库的容器查询 Mixin 封装 */ /* 为什么封装为 CSS 自定义属性： 组件库的断点应该统一管理， 避免每个组件硬编码断点值； 自定义属性可以在主题层覆盖 */ :root { --container-breakpoint-sm: 300px; --container-breakpoint-md: 500px; --container-breakpoint-lg: 700px; } /* 通用容器声明 */ .container-aware { container-type: inline-size; container-name: component-container; } /* 响应式网格组件 */ .responsive-grid { display: grid; gap: 16px; /* 默认单列 */ grid-template-columns: 1fr; } @container component-container (min-width: 500px) { .responsive-grid { grid-template-columns: repeat(2, 1fr); } } @container component-container (min-width: 700px) { .responsive-grid { grid-template-columns: repeat(3, 1fr); } } /* 响应式导航组件 */ .nav-bar { display: flex; flex-direction: column; gap: 8px; } @container component-container (min-width: 500px) { .nav-bar { flex-direction: row; justify-content: space-between; align-items: center; } .nav-bar__hamburger { display: none; } .nav-bar__links { display: flex; gap: 16px; } }3.4 容器查询与 JavaScript 的配合
// 监听容器尺寸变化 class ContainerQueryObserver { constructor(element, callback) { this.element = element; this.callback = callback; // 使用 ResizeObserver 监听容器尺寸 // 为什么用 ResizeObserver 而非 matchMedia： // matchMedia 只能监听视口媒体查询； // ResizeObserver 可以监听任意元素的尺寸变化 this.observer = new ResizeObserver((entries) => { for (const entry of entries) { const width = entry.contentBoxSize?.[0]?.inlineSize || entry.contentRect.width; // 将容器宽度映射到断点状态 const breakpoint = this.getBreakpoint(width); this.callback(breakpoint, width); } }); this.observer.observe(element); } getBreakpoint(width) { // 与 CSS @container 断点保持一致 // 为什么 JS 也需要断点逻辑：某些交互行为 // （如导航展开/折叠）需要根据容器宽度 // 切换，纯 CSS 无法处理 if (width >= 700) return "lg"; if (width >= 500) return "md"; return "sm"; } disconnect() { this.observer.disconnect(); } } // 使用示例 const navContainer = document.querySelector(".nav-container"); const observer = new ContainerQueryObserver( navContainer, (breakpoint, width) => { console.log(`容器断点: ${breakpoint}, 宽度: ${width}px`); // 根据断点调整 JavaScript 行为 if (breakpoint === "sm") { // 移动端：折叠导航 navState.isExpanded = false; } } );四、Container Queries 的架构权衡：性能、嵌套与浏览器支持
容器查询的性能开销：每个声明了container-type的元素都会被浏览器监听尺寸变化。大量容器（如列表中每项都是容器）会增加布局计算开销。建议只在需要响应式布局的组件上声明容器，而非全局声明。
嵌套容器的优先级问题：组件嵌套时，内层组件会查询最近的祖先容器。如果中间层也是容器，内层组件查询的是中间层的宽度，而非最外层的宽度。设计时需要明确每个组件应该查询哪个容器，避免意外查询到错误的容器。
容器查询与媒体查询的共存：容器查询不替代媒体查询——页面级别的布局（如侧边栏显示/隐藏）仍用媒体查询，组件级别的布局用容器查询。两者各司其职，不应混用。
浏览器支持与降级：Container Queries 在 Chrome 105+、Safari 16+、Firefox 110+ 支持。不支持的浏览器中，组件会使用默认样式（通常是移动端布局）。降级策略是"移动优先"——默认样式为窄屏布局，容器查询扩展为宽屏布局。
五、总结
Container Queries 实现了真正的组件级响应式，让组件可以根据所在容器的尺寸自适应布局，而非依赖视口宽度。落地时建议采用"移动优先"策略，默认样式为窄屏布局，用@container扩展宽屏布局。容器查询单位（cqw、cqh）配合clamp()实现流式排版，避免硬编码断点。容器声明应限制在需要响应式的组件上，避免全局性能开销。
