回答

cqfill.js一种用于CSS容器查询的Polyfill。

那么什么是polyfill？

Polyfill是一个js库，主要抚平不同浏览器之间对js实现的差异。比如，html5的storage(session,local), 不同浏览器，不同版本，有些支持，有些不支持。Polyfill.js会帮你把这些差异化抹平，不支持的变得支持了（典型做法是在IE浏览器中增加 window.XMLHttpRequest ，内部实现使用 ActiveXObject。）

那么cqfill其实也是一种polyfill，主要解决不用浏览器对容器查询不兼容。

容器查询允许作者根据容器的大小来设置元素的样式。这类似于@media查询，但是它针对容器而不是可视窗口大小进行评估。

写法很简单

第一步：

将contain属性的值复制到名为的CSS自定义属性中--css-contain

复制@container规则作为@media带有文本的规则--css-container

/* Create a Container Root */
.container {
contain: layout inline-size; /* 这个是给支持容器查询的现代浏览器用的*/
--css-contain: layout inline-size; /* 这个是polyfill可以处理的。给不支持容器查询的浏览器使用 */
}

/* Container Query */
@container (min-width: 700px) { /*这个是给支持容器查询的现代浏览器用的 */
.contained {
/* … */
}
}

@media --css-container and (min-width: 700px) { /*这个是polyfill可以处理的。给不支持容器查询的浏览器使用 */
.contained {
/* … */
}
}

引入cqfill.js就好了

 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/cqfill.js"></script>
<script>
 window.addEventListener('load', () => {
   cqfill();
 });
</script>