css container 容器查询

@container 容器查询的作用

假如要求一个元素在宽度小于400px的文字缩小为14px，大于400px时文字为20px，通常的做法是通过媒体查询，根据浏览视口的来做。如果要求视口不变时也达到这个效果，就需要通过js来实现。

@container查询就是实时查询元素的尺寸，根据不同的尺寸，对内部属性进行特定的样式设置，先看一个例子。

css代码:

      .container {
        resize: horizontal;
        overflow: auto;
        font-size: 20px;
        container-type: inline-size;
        container-name: sidebar;
      }

      @container sidebar (max-width: 400px) {
        p {
          font-size: 14px;
          color: red;
        }
      }

html:

    <div class="container">
      <p>
        This is a static template, there is no bundler or bundling involved!
      </p>
    </div>

效果如下：

当container元素宽度小于等于400px时，文字的颜色变为红色，字体变为14px。

你可以点击这里测试: css container 容器查询

属性介绍

container-type

• inline-size: 为容器的内联轴上的维度查询建立查询容器，就是水平方向建立；
• size: 为块和内联轴上的维度查询建立查询容器，就是水平和垂直方向都建立；
• normal：该元素不是块和内联轴上任何维度查询的查询容器，就是水平和垂直方向均不建立；

container-name

如果页面上有多个容器，那么设置名称可以区分开，比如下面代码会修改所有的容器下的

标签的颜色和字体大小。
例如css代码：

      @container (max-width: 400px) {
        p {
          font-size: 14px;
          color: red;
        }
      }

设置名称后的就只有 sidebar1 容器下的

标签样式会改变。
css代码如下:

      .container-1 {
        container-type: inline-size;
        container-name: sidebar1;
      }
      .container-2 {
        container-type: inline-size;
        container-name: sidebar2;
      }

      @container sidebar1 (max-width: 400px) {
        p {
          font-size: 14px;
          color: red;
        }
      }

兼容性

chrome和safari已经支持了，但firefox还不支持，在个人项目中使用没有问题。