@container - 容器查询

背景介绍：

我们做开发经常会遇到这样的一个需求，要开发一个响应式的网站，但是我们需要我们的元素样式跟随着我们的元素尺寸大小变化而变化。而我们常用的媒体查询（Media Queries）检测的是视窗的宽高，根本无法满足我们的业务需求，这时我们常常会用到一个container属性，容器查询来实现我们的，元素样式跟随着我们的元素尺寸大小变化而变化。的业务需求。但是container是就要好几个属性可以使用的。今天我们就来好好介绍一下这几个属性。

容器查询的属性一共有三个，分别是container-type、container-name、container。

container-type：

标识一个作为被查询的容器，取值范围为normal、size、inline-size、block-size、layout、style、state

normal是默认值，表示不建立容器元素，
size表示水平和垂直方向都建立，
inline-size是只在水平方向建立，会给元素同时应用
layout、style和inline-size容器状态。

container-name：

被查询的容器的名字

container-name的作用是给容器元素命名，这个属性在页面中存在多个容器元素的时候,可以帮我们区分不同的容器属性，不至于搞混。
如

@container (max-width: 780px) {
   p {
    font-size: 20px;
  }
}

如果页面中存在多个容器元素，则这些元素中的

元素都会应用 font-size: 20px;，但我们的初衷可能就只有某一个容器元素才应用相关样式，此时container-name就很有作用了。

.container-a {
    container: inline-size aside;
}
.container-b {
    container: inline-size banner;
}
@container banner (max-width: 480px) {
  p {
    font-size: 20px;
  }
}

container：

container-type和container-name的简写

使用方法

首先需要使用container-type或者container属性指定一个元素作为被查询的容器。然后使用@container进行容器查询。

    <div id="app">
        <div class="demo">
          <a>我的背景色会随着demo元素的宽度而变化</a>
        </div>
    </div>
</template>

<style>
.demo {
  width: 200px;
  height: 200px;
  background: red;
  container: inline-size;
}

@container (inline-size > 300px) {
  a {
    background: green;
  }
}
</style>