CSS Container Queries 实战：组件级响应式设计

# CSS Container Queries 实战 ## 为什么需要 Container Queries？ 传统的 `@media` 查询只能基于视口（viewport）宽度来调整样式。但同一个卡片组件可能被放在侧边栏（300px 宽）或主内容区（800px 宽），它的布局应该取决于容器宽度，而非视口宽度。 ## 基本语法 ```css /* 1. 声明容器 */ .card-wrapper { container-type: inline-size; container-name: card; } /* 2. 基于容器宽度编写样式 */ @container card (min-width: 400px) { .card { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; } } @container card (max-width: 399px) { .card { display: flex; flex-direction: column; } .card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } } ``` ## 搭配 Container Query Units ```css /* cqw = 容器宽度的 1% */ .card-title { font-size: clamp(1rem, 3cqw, 1.5rem); } .card-description { font-size: clamp(0.875rem, 2.5cqw, 1.125rem); line-height: 1.6; } ``` ## 实际案例：仪表盘组件 ```css .dashboard-widget { container-type: inline-size; } /* 窄模式：纯数字 */ @container (max-width: 200px) { .widget-chart { display: none; } .widget-number { font-size: 2rem; } } /* 中等模式：数字 + 迷你图 */ @container (min-width: 201px) and (max-width: 400px) { .widget-chart { height: 60px; } } /* 宽模式：完整图表 */ @container (min-width: 401px) { .widget-chart { height: 200px; } .widget-details { display: block; } } ``` ## 浏览器支持 所有现代浏览器已全面支持 Container Queries（Chrome 105+, Firefox 110+, Safari 16+）。可以放心在生产环境使用。 ## 总结 Container Queries 让组件真正做到"自适应"，是构建组件库和设计系统的利器。