CSS Container Queries：响应式设计的新突破

CSS Container Queries：响应式设计的新突破

什么是 Container Queries？

Container Queries 是 CSS 的一个新特性，允许根据父容器的尺寸来应用样式。

Container Queries vs Media Queries

基础用法

.container { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card-content { display: flex; } }

Container Type

.element { container-type: size; /* 同时关注宽高 */ container-type: inline-size; /* 仅关注行内尺寸 */ container-type: normal; /* 默认，不建立容器 */ }

Container Name

.card { container-type: inline-size; container-name: card-container; } @container card-container (min-width: 500px) { .card-title { font-size: 1.5rem; } }

容器查询单位

@container (min-width: 400px) { .element { font-size: 1cqi; /* 容器宽度的 1% */ padding: 2cqw; /* 容器宽度的 2% */ margin: 3cqh; /* 容器高度的 3% */ } }

实际应用

响应式卡片

.card { container-type: inline-size; container-name: card; } .card-header { font-size: 1rem; } .card-body { padding: 1rem; } @container card (min-width: 400px) { .card { display: flex; } .card-header { font-size: 1.25rem; width: 30%; } .card-body { flex: 1; padding: 1.5rem; } }

组件级响应式

.avatar { width: 48px; height: 48px; border-radius: 50%; } .user-info { container-type: inline-size; container-name: user-info; } @container user-info (min-width: 300px) { .avatar { width: 64px; height: 64px; } .username { font-size: 1.1rem; font-weight: bold; } }

组合使用

.card { container-type: inline-size; container-name: card; } @container card (min-width: 400px) and (max-width: 600px) { .card-content { display: grid; grid-template-columns: 1fr 1fr; } } @container card (min-width: 601px) { .card-content { display: grid; grid-template-columns: 1fr 1fr 1fr; } }

嵌套容器

.layout { container-type: inline-size; container-name: layout; } .card { container-type: inline-size; container-name: card; } @container layout (min-width: 800px) { .cards { display: grid; grid-template-columns: 1fr 1fr; } } @container card (min-width: 300px) { .card-title { font-size: 1.25rem; } }

浏览器兼容性

最佳实践

1. 合理命名容器

.main-content { container-type: inline-size; container-name: main-content; }

2. 优先使用容器查询

/* 先定义默认样式 */ .card { padding: 1rem; } /* 再定义容器查询样式 */ @container (min-width: 400px) { .card { padding: 1.5rem; } }

3. 结合媒体查询使用

/* 全局响应式 */ @media (min-width: 1200px) { .page-container { max-width: 1200px; } } /* 组件响应式 */ .card { container-type: inline-size; } @container (min-width: 300px) { .card { display: flex; } }

总结

Container Queries 为响应式设计带来了新的可能性：

1. 组件级响应式：根据父容器尺寸调整样式
2. 更高的复用性：组件可以在不同场景自适应
3. 更清晰的代码：将响应式逻辑封装在组件内部
4. 更好的用户体验：更精细的响应式控制

掌握 Container Queries，让你的组件更加灵活和强大。