CSS Container Queries响应式设计的新突破什么是 Container QueriesContainer Queries 是 CSS 的一个新特性允许根据父容器的尺寸来应用样式。Container Queries vs Media Queries特性Media QueriesContainer 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; } }浏览器兼容性浏览器支持情况Chrome✅ 105Firefox✅ 119Safari✅ 16.4Edge✅ 105最佳实践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 为响应式设计带来了新的可能性组件级响应式根据父容器尺寸调整样式更高的复用性组件可以在不同场景自适应更清晰的代码将响应式逻辑封装在组件内部更好的用户体验更精细的响应式控制掌握 Container Queries让你的组件更加灵活和强大。
CSS Container Queries：响应式设计的新突破
CSS Container Queries响应式设计的新突破什么是 Container QueriesContainer Queries 是 CSS 的一个新特性允许根据父容器的尺寸来应用样式。Container Queries vs Media Queries特性Media QueriesContainer 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; } }浏览器兼容性浏览器支持情况Chrome✅ 105Firefox✅ 119Safari✅ 16.4Edge✅ 105最佳实践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 为响应式设计带来了新的可能性组件级响应式根据父容器尺寸调整样式更高的复用性组件可以在不同场景自适应更清晰的代码将响应式逻辑封装在组件内部更好的用户体验更精细的响应式控制掌握 Container Queries让你的组件更加灵活和强大。
