无需登录 数据私有 本地保存

CSS 容器查询演示 - @container 根据父元素响应

CSS 开发工具 CSS 容器查询 演示
15
0
0
0

CSS 容器查询演示

拖动滑块或调整容器大小，观察 @container 如何根据父元素尺寸（而非视口）动态改变内部布局

550 px
中等模式
200px 1000px
200 400 600 800 1000

桌面端可拖动右下角手柄调整容器宽度 | 移动端使用滑块

父容器 (container) 550px
新品上市
降噪无线耳机 Pro
主动降噪 · 蓝牙5.3 · 40小时续航 · 舒适佩戴体验，支持多点连接
¥599
立即购买
对应 CSS 代码
场景一 · 断点 400px / 620px
常见问题

CSS 容器查询是一种允许开发者根据父容器的尺寸（而非浏览器视口）来应用条件样式的新特性。通过设置 container-type 属性，一个元素被标记为"查询容器"，其内部的子元素可以使用 @container 规则根据该容器的宽度（或高度）来改变样式。这使得组件可以真正做到"自包含响应式"，无论在页面的哪个位置、处于什么布局中，都能根据自身可用空间自适应。

关键区别在于参照对象不同：
· 媒体查询 (@media)：基于浏览器视口（viewport）的尺寸，全局生效，适合页面级布局调整。
· 容器查询 (@container)：基于父容器的尺寸，局部生效，适合组件内部的样式调整。
容器查询让组件可以在不同上下文（如侧边栏、主内容区、弹窗）中都能正确响应，而不依赖全局视口大小。这使得组件更具可复用性。

container-type 有三个可选值：
· inline-size：仅根据容器的内联尺寸（通常是宽度，在水平书写模式下）建立查询容器。最常用。
· size：同时根据容器的宽度和高度建立查询容器。使用较少。
· normal：默认值，不作为查询容器。
配合 container-name 可以为容器命名，在 @container 规则中指定目标容器。

容器查询已在所有主流现代浏览器中获得广泛支持：
· Chrome 105+（2022年8月）
· Safari 16+（2022年9月）
· Firefox 110+（2023年2月）
· Edge 105+
全球覆盖率已超过94%。对于不支持的旧浏览器，建议使用 @supports 进行特性检测并提供回退样式。

典型应用场景包括：
· 可复用组件：同一卡片组件在侧边栏（窄）和主内容区（宽）自动切换布局。
· 响应式表格：根据容器宽度自动隐藏/显示列。
· 自适应网格：产品列表在不同宽度的容器中自动调整列数。
· CMS 布局：内容块在模板的不同区域（如2栏/3栏布局）中自适应。
· 弹窗/抽屉：模态框内容根据弹窗大小调整内部排版。

快速上手步骤：
1. 给父容器设置 container-type: inline-size;
2. （可选）设置 container-name: my-container; 以便在多个容器中区分。
3. 使用 @container my-container (min-width: 500px) { ... } 定义条件样式。
4. 容器内的子元素会根据容器宽度自动切换样式。
建议使用 渐进增强 策略：先写好基础样式（移动端优先），再用容器查询增强较大容器中的布局。
🔧 相关工具