.wrap{width:500px;调整大小：水平；溢出：自动；}.g-容器{显示：弹性；flex-wrap:nowrap;}.wrap{/*CSS容器*/容器名称:wrap;container-type:inline-size;}@containerwrap(max-width:400px){.g-container{flex-wrap:wrap;弹性方向：列；}}像这样，我们使用resize:horizo??ntal来模拟单个容器的宽度变化。在这种情况下，容器查询可以改变容器在不同宽度下的内部布局。这样就简单的实现了一个容器查询功能：注意，仔细对比上面的例子，这里浏览器的视口宽度没有变化，只是容器的宽度发生了变化！通过一张简单的图就可以看出媒体查询和容器查询的异同。核心点在于，当容器的宽度发生变化时，视口的宽度并不一定会发生变化：我们简单地拆解上面的代码，非常容易理解。在.warp样式中，通过container-name注册一个容器：wrap注册完容器后，可以使用@containerwrap()容器查询语法，在不同的情况下再写一套样式。这里@containerwrap(max-width:400px){}表示当.wrap容器的宽度小于400px时，使用内部定义的样式，否则使用外部默认样式。关于容器查询更具体的语法，建议去看看MDN或者详细看一下规范--MDN--CSSContainerQueries关于容器查询的一些思考第一次看到这种语法，第一个场景我想到的是字体的自适应大小。让我们看看这样的场景。在很多情况下，我们无法估计文案的内容。所以希望内容多的时候字体小一些，内容少于一行或者很少的时候字体大一些：CodePenDemo--ContainerQuriesDemo当然我没试过在这个阶段out容器查询中，容器的宽度可以随着输入的变化动态改变容器的大小。目前这里还存在一些缺陷，是需要进一步研究的地方。当然，在那些可以提前知道不同宽度，可以预设不同布局的场景下，容器查询的用处是非常大的。我们可以利用它在不同宽度的容器下快速构建不同的性能。比如这样一个DEMO：CodePenDemo--CSSContainerQueries一般来说，容器查询还处于比较早期的发展阶段，很多有趣的用法还有待探索。但它确实算作CSS今年最大的创新之一。最后，本文到此结束。希望这篇文章对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。