📐 CSS容器查询生成器

Updated: 2026-07-11
广告位 (728×90)

⚙️ 容器设置

拖拽右下角调整容器宽度查看响应式效果

📋 CSS代码

广告位 (728×90)

📖 使用说明

CSS容器查询生成器帮助你可视化创建 @container 响应式样式规则。

使用方法

  1. 选择container-type(inline-size或size)并设置container-name
  2. 设置min-width和/或max-width值
  3. 在预览区域拖拽调整容器大小查看响应式效果
  4. CSS代码自动生成,点击"复制"即可使用

应用场景

❓ 常见问题

CSS容器查询是什么?

CSS容器查询(@container)是一种CSS技术,允许根据父容器的大小而非视口大小来应用样式。它使得组件级响应式设计成为可能,比@media查询更灵活。

这个工具是免费的吗?

是的,完全免费使用,无需注册,无需登录,所有功能都可以直接使用。

生成的CSS代码兼容哪些浏览器?

CSS容器查询在Chrome 105+、Firefox 110+、Safari 16+等现代浏览器中已获得支持。建议为旧版浏览器提供@media查询作为fallback。

使用时数据会上传到服务器吗?

不会。所有处理都在你的浏览器中完成,数据不会上传到任何服务器。即使断开网络也能正常使用。

container-type的inline-size和size有什么区别?

inline-size表示容器在行内方向(通常是宽度)可以被查询,而size表示宽度和高度都可以被查询。大多数响应式布局使用inline-size就足够了。