因为用户在浏览我的网站时设备的不确定性，迫使我们在编写代码时都会被要求网站自动适配多端(手机端、电脑端、平板端)。那如何编写响应式式代码？如何让我们的网站更好的适配多端？让我们的网站适配性能更好？成为了很多程序员思考的问题。

接下来我就给大家介绍一个新的css属性，帮助我们的网站更好的适配多端！！！

@container

@container是什么？

@container是css新出的属性，我们称为@container规则，也称@container查询，可以实时匹配指定为容器元素的尺寸，开发者可以基于不同的尺寸范围，对内部的元素进行特定的样式设置与布局实现。

总结一句话：@container可以根据某个指定元素的大小变化，而适配不同的css样式。

@container类似于@media查询，但是他们之间的区别：是

@media匹配的是浏览器窗体。
@container匹配的是某个元素。

所以，业界就有这样的说法，@media查询适用于宏观布局，@container查询适用于微观布局

如果我们希望当我们的某个元素的尺寸大小发生改变时，改变我们的样式，就可以使用@container。这里我们匹配我们的div元素，当div的width小于780px时我们就给我们div里的文字加粗。反之不加粗。

代码演示：

HTML

<div class="container">
    <p>这是一段文字，用来演示@container。当div的width小于780px时我们就给我们div里的文字加粗,字号变大。反之不加粗</p>
</div>

CSS

.container {
    container-type: inline-size;
    border: 1px solid black;
}
.container p {
    font-size: clamp(.75rem, calc(100cqw / 40), 2rem);
}
@container (max-width: 780px) {
  .container p {
    font-weight: bold;
    font-size: 20px;
  }
}

原理

凡是写在@container规则中的CSS语句，都会寻找最近的容器元素，并进行匹配。

例如，上面的例子中，.container p匹配的元素最近的容器元素就是.container元素，因此，会在.container元素尺寸小于780px的时候，渲染@container规则中的CSS语句。

如果页面中没有任何元素是容器元素（也就是没有元素设置container属性），则@container是不会执行的，同时cqw单位会按照浏览器窗体尺寸就像计算（等同于vw）。

所以@container规则生效的前提就是需要先声明容器元素，使用的是CSS container属性。

写在最后

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

一个新的css属性，帮助我们的网站更好的适配多端!!

@container

@container是什么？

原理

写在最后