容器查询是CSS中的一项新功能，可让您根据元素容器的大小将样式应用于元素。这与媒体查询相反，媒体查询将样式适用于基于视口的大小。
例如，您可以使用容器查询根据其容器宽度更改标题元件的字体大小。如果容器狭窄大于700px，则字体尺寸将较小，并且容器宽于700px，则字体尺寸将大。
@container (min-width: 700px) {
.heading {
font-size: 20px;
}
}
@container (max-width: 700px) {
.heading {
font-size: 16px;
}
}