CSS Container Queries实战：组件级响应式设计新方案
传统媒体查询只能基于视口尺寸调整样式，而CSS Container Queries(容器查询)允许组件根据自身容器尺寸进行响应式调整，真正实现了组件级的自适应设计。
1. 容器查询基础用法
首先需要定义容器元素，然后使用@container规则：
/* 定义容器 */
.container {
container-type: inline-size;
}/* 基于容器宽度的样式调整 */
@container (min-width: 400px) {
.component {
flex-direction: row;
}
}
.container {
container-type: inline-size;
}/* 基于容器宽度的样式调整 */
@container (min-width: 400px) {
.component {
flex-direction: row;
}
}
2. 实际案例：自适应卡片组件
创建一个根据容器宽度自动调整布局的卡片组件
响应式卡片标题
这是一个使用CSS容器查询实现的响应式卡片组件，会根据容器宽度自动调整布局。
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}/* 窄容器：垂直布局 */
@container (max-width: 399px) {
.card img {
width: 100%;
height: auto;
}
}
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}/* 窄容器：垂直布局 */
@container (max-width: 399px) {
.card img {
width: 100%;
height: auto;
}
}
/* 中等容器：水平布局 */
@container (min-width: 400px) and (max-width: 599px) {
.card {
display: flex;
}
.card img {
width: 150px;
height: auto;
}
}
/* 宽容器：大图垂直布局 */
@container (min-width: 600px) {
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
}
3. 容器查询与媒体查询对比
- 媒体查询：基于浏览器视口尺寸，全局样式调整
- 容器查询：基于组件容器尺寸，局部样式调整
- 应用场景：容器查询更适合可复用组件在不同位置的样式适配
4. 浏览器兼容性提示
目前主流现代浏览器均已支持容器查询，对于旧版浏览器可以使用以下polyfill：
// 引入polyfill
import ‘container-query-polyfill’;
import ‘container-query-polyfill’;
CSS Container Queries为响应式设计带来了革命性的改变，使组件能够真正独立于上下文环境自适应展示，大幅提升了前端开发的灵活性和组件复用性。
