前端技术探索系列：CSS 容器查询详解 📦
致读者：探索组件级响应式设计 👋
前端开发者们，
今天我们将深入探讨 CSS 容器查询（Container Queries），这项新特性让我们能够基于容器大小而不是视口大小来创建响应式设计。
容器查询基础 🚀
定义容器
/* 声明容器 */
.card-container {
container-type: inline-size; /* 或 size, normal */
container-name: card; /* 可选：命名容器 */
}
/* 简写语法 */
.card-container {
container: card inline-size;
}
基础查询语法
/* 基于容器宽度的样式 */
@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);
}
}
响应式组件设计 🎯
卡片组件
/* 卡片容器 */
.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;
}
}
网格布局
.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);
}
}
高级应用 💫
嵌套容器查询
/* 主容器 */
.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;
}
}
组合查询
/* 容器 + 媒体查询 */
@media (prefers-color-scheme: dark) {
@container (min-width: 500px) {
.card {
background: #2a2a2a;
color: #ffffff;
}
}
}
/* 多条件容器查询 */
@container (min-width: 300px) and (max-width: 500px) {
.element {
/* 样式 */
}
}
兼容性处理 🛠️
特性检测
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) {
/* 回退样式 */
}
}
渐进增强
/* 基础样式 */
.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;
}
}
}
实际应用示例 ⚡
响应式导航
.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;
}
}
自适应表单
.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;
}
}
最佳实践建议 💡
设计策略
组件优先逻辑分层渐进增强兼容处理
性能考虑
合理使用容器避免过度嵌套优化查询条件减少重排影响
开发建议
模块化设计清晰命名文档完善测试覆盖
最佳实践
语义化容器响应式断点回退方案维护策略
写在最后 🌟
容器查询为组件级响应式设计带来了革命性的变化，让我们能够创建更灵活、更可复用的组件。
进一步学习资源 📚
容器查询规范兼容性数据实战案例工具支持
如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇
终身学习，共同成长。
咱们下一期见
💻