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

容器查询互动沙盒 - @container响应式组件

前端设计 教育工具 CSS 响应式 容器查询
60
0
0
0
CSS Container Queries

@container 响应式组件沙盒

拖拽手柄或滑动滑块调整容器宽度，观察组件如何响应容器尺寸变化（而非视口）

预设示例
CSS 规则编辑器
快捷跳转
容器宽度： 500px 中容器
500px
小 中 大 最大
常见问题 & 知识点
什么是CSS容器查询（@container）？
容器查询是CSS的新特性，允许组件根据其父容器的尺寸（而非浏览器视口）来调整样式。这意味着同一个组件在不同宽度的容器中会自动适配，实现真正的组件级响应式设计。使用container-type声明容器，使用@container规则定义条件样式。
容器查询和媒体查询（@media）有什么区别？
媒体查询基于视口（浏览器窗口）大小，适合页面级布局；容器查询基于父容器大小，适合组件级适配。例如一个卡片组件放在侧边栏（窄）和主内容区（宽）时，容器查询能让它自动调整布局，而媒体查询无法区分这两种场景。
哪些浏览器支持@container？
所有主流浏览器已全面支持：Chrome 105+、Edge 105+、Safari 16+、Firefox 110+。截至2024年，全球覆盖率超过93%，可以在生产环境中放心使用。对于老旧浏览器，建议使用@supports进行渐进增强。
如何声明一个容器查询的容器？
在父元素上设置container-type: inline-size（基于宽度查询）或container-type: size（同时基于宽度和高度）。也可以使用简写container: <name> / inline-size来同时设置名称和类型。注意：设置container-type会自动应用contain: layout style。
容器查询支持哪些条件和单位？
支持min-width、max-width、width范围语法（如300px <= width <= 600px），以及aspect-ratio、orientation等条件。还可以使用容器查询长度单位：cqw（容器宽度的1%）、cqh、cqi、cqb、cqmin、cqmax。
使用容器查询时有哪些最佳实践？
1. 为可复用组件（卡片、导航、表单等）设置容器查询；2. 使用container-name命名容器，避免嵌套冲突；3. 结合cqw单位实现流体排版；4. 保留@media处理整体页面布局；5. 使用浏览器DevTools检查容器查询的匹配状态。
🔧 相关工具