Question 1

CSS容器查询(@container)是什么？

Accepted Answer

CSS容器查询(@container)是一种基于父容器尺寸的响应式查询方式，不同于@media的视口查询。它允许组件根据自身容器的大小来调整样式，实现真正的组件级响应式设计。Chrome 105+、Firefox 110+、Safari 16+均已支持。

Question 2

container-type属性有哪些取值？

Accepted Answer

container-type有三个取值：size（同时监测内联和块方向尺寸，需显式设置容器尺寸）、inline-size（仅监测内联方向/宽度）、normal（仅用于样式查询，非尺寸查询）。通常使用inline-size即可。

Question 3

容器查询和媒体查询有什么区别？

Accepted Answer

媒体查询(@media)基于视口(viewport)尺寸，适合全局布局调整。容器查询(@container)基于父容器尺寸，适合组件内部自适应的样式调整。容器查询更适合可复用组件，让组件在任何尺寸的父容器中都能自动适配。

Question 4

尺寸查询和样式查询有什么不同？

Accepted Answer

尺寸查询(@container (min-width: 400px))基于容器尺寸触发样式变化。样式查询(@container style(--theme: dark))基于容器的CSS自定义属性值触发。目前浏览器对样式查询的支持还不完善，尺寸查询是主流用法。

📦 CSS 容器查询生成器

⚙️ 容器设置