容器查询（CSS Container Queries）

容器查询的能力

容器查询它给予了 CSS，在不改变浏览器视口宽度的前提下，只是根据容器的宽度变化，对布局做成调整的能力。

还是上面的例子，简单的代码示意：

<div class="wrap">
    <div class="g-container">
        <div class="child">Title</div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p>
    </div>
</div>

.wrap {
    width: 500px;
    resize: horizontal;
    overflow: auto;
}
.g-container {
    display: flex;
    flex-wrap: nowrap;
}
.wrap {
    /* CSS CONTAINER */
    container-name: wrap;
    container-type: inline-size;
}
@container wrap (max-width: 400px) {
    .g-container {
        flex-wrap: wrap;
        flex-direction: column;
    }
}

像是这样，我们通过 resize: horizontal 来模拟单个容器的宽度变化，在这种情况下，容器查询能够做到在不同宽度下，改变容器内部的布局。

这样，就简单实现了一个容器查询功能：

注意，仔细和上面的例子作对比，这里，浏览器的视口宽度是没有变化的，变化的只是容器的宽度！

媒体查询与容器查询的异同，通过一张简单的图看看，核心的点在于容器的宽度发生变化时，视口的宽度不一定会发生变化：

我们简单拆解下上述的代码，非常好理解。

1. 在 .warp 的样式中，通过 container-name: wrap 注册一个容器
2. 注册完容器之后，便可以通过 @container wrap () 容器查询语法，在内部写入不同情况下的另外一套样式
3. 这里 @container wrap (max-width: 400px) {} 的意思便是，当 .wrap 容器的宽度小于 400 px 时，采用内部定义的样式，否则，使用外部默认的样式

关于容器查询更为具体的语法，我建议还是上 MDN 或者规范详细看看 – MDN – CSS Container Queries