我刚做了一个快速测试,可以确认容器查询在主题中有效……我注意到的一点是,它们比媒体查询更难理解。我们团队中的几个人最初对此感到困惑。
它们不仅仅是容器上的媒体查询,而是有一套单独的要求。最大的问题是:
尺寸容器会关闭元素从其内容获取尺寸信息的能力,这对于容器查询避免无限循环很重要。
因此,您不能将容器查询与具有动态宽度的容器一起使用。您必须为容器设置静态宽度。不幸的是,这极大地限制了您期望能够用它们实现的功能。
这是一个非常有趣的演示概念,展示了它们的工作原理
@media screen and (min-width: 500px) {
.fk-d-button-tooltip {
width: 300px;
background: green;
container-type: inline-size;
}
}
@media screen and (min-width: 1000px) {
.fk-d-button-tooltip {
width: 500px;
background: yellow;
container-type: inline-size;
}
}
@container (min-width: 400px) {
#create-topic {
background: blue !important;
}
}
低于 400px 的容器:
高于 400px 的容器:

