什么是 CSS Container Query
随着组件化开发成为现代前端的主流，传统的 Media Query 已经无法满足所有响应式布局需求。Media Query 是根据浏览器视口大小调整页面，而 CSS Container Query 则可以根据父容器的尺寸动态调整组件样式，让同一个组件在不同布局环境中自动适配。
例如，一个商品卡片放在首页时可能占据四分之一宽度，而放在侧边栏时只有原来的一半宽度。使用传统媒体查询，需要针对不同页面编写额外样式；而使用 Container Query 后，组件只需要关注自身所在容器的大小即可，大幅提升组件的可复用性和维护效率。Container Query 已成为现代 CSS 响应式开发的重要能力，并已得到主流浏览器的广泛支持。
Container Query 与 Media Query 有什么区别
很多开发者刚接触 Container Query 时，最大的疑问就是它是否会取代 Media Query。实际上，两者解决的问题并不相同。
Media Query 更适用于整个页面布局，例如：
PC、平板、手机整体布局切换
暗黑模式
横竖屏切换
用户设备特性检测
Container Query 更适用于组件自身，例如：
卡片组件
商品列表
用户信息卡
Dashboard 小组件
导航菜单
Sidebar 模块
简单来说：
Media Query 关注浏览器窗口。
Container Query 关注组件所在空间。
现代项目通常会同时使用两者：页面布局继续使用 Media Query，而组件响应式优先采用 Container Query，实现更加模块化的设计。
如何使用 CSS Container Query
使用 Container Query 一般分为两个步骤。
第一步，为父元素声明容器。
.card-list {
container-type: inline-size;
}
如果需要指定名称，也可以这样写：
.card-list {
container: cards / inline-size;
}
第二步，使用 @container 编写查询规则。
@container (min-width: 500px) {
.card {
display: flex;
}
}
或者使用现代范围语法：
@container (width > 500px) {
}
当父容器宽度达到指定条件时，组件样式便会自动切换，而不是依赖浏览器窗口大小。
Container Query 常见应用场景
商品卡片
在宽容器中采用左右布局。在窄容器中自动变成上下布局。
无需关心当前页面是首页、分类页还是侧栏。
Dashboard
后台管理系统通常包含大量统计卡片。不同屏幕下，同一个统计组件可能占据不同宽度。
Container Query 可以让统计组件根据实际空间调整字体、图标和按钮大小。
CMS 内容模块
博客、新闻网站常常存在：
首页推荐
分类页
搜索结果
相关文章
这些区域都可能复用同一个文章卡片组件。
使用 Container Query 后，无需针对不同页面重复维护 CSS。
Sidebar
导航菜单可以根据侧边栏宽度决定：
是否显示文字
是否隐藏描述
是否仅保留图标
整个组件无需关心浏览器宽度。
Container Query Length Units
除了 @container，CSS 还新增了一组非常实用的容器单位。
常见包括：
cqw：容器宽度的 1%
cqh：容器高度的 1%
cqi：容器行内方向尺寸
cqb：容器块方向尺寸
cqmin：较小值
cqmax：较大值
例如：
.title{
font-size:2cqi;
}
这样字体大小会随着父容器变化，而不是随着整个浏览器窗口变化，非常适合构建自适应组件和流式排版。
开发中的最佳实践
在实际项目中，可以遵循以下原则：
页面整体布局仍然使用 Media Query。
所有可复用组件优先使用 Container Query。
为组件单独设置容器，避免依赖页面结构。
使用现代范围语法，让代码更加简洁易读。
配合 CSS Grid、Flexbox 与 Container Query 构建真正的组件化响应式布局。
使用容器单位（如 cqi、cqw）实现更自然的字体与间距缩放。
对旧版浏览器准备合理降级方案，必要时保留少量 Media Query 作为兼容措施。
浏览器兼容性如何
截至 2026 年，Chrome、Edge、Firefox、Safari 等主流现代浏览器均已支持 Container Query，已具备生产环境使用条件。对于仍需兼容旧版本浏览器的项目，可采用渐进增强策略：现代浏览器启用 Container Query，旧浏览器继续使用传统布局，不影响基础功能。
总结
CSS Container Query 是近年来响应式布局领域最重要的技术之一，它让组件真正具备根据自身容器空间进行自适应的能力，而不再受限于浏览器视口。结合 Flexbox、Grid、Container Units 等现代 CSS 特性，开发者可以构建更加灵活、可复用、易维护的组件化界面。对于采用 React、Vue、Angular、Next.js 等框架的项目，将 Container Query 纳入日常开发实践，有助于减少重复样式代码，提升响应式设计质量，并为未来的前端架构打下更加稳固的基础。