关于前端:新时代布局新特性-容器查询

终于，在漫长的期待下，容器查问（CSS Container Queries）将在 Chrome 105 版本失去正式的反对！

而目前，咱们也能在 Chrome Canary 版本中，或者在 Chrome 93~104 通过开启 Enable CSS Container Queries 个性领先体验。

在之前，响应式有这么个掣肘。同一 DOM 的不同布局状态如果想要变动，须要依赖诸如 媒体查问 来实现。

像是这样：

通过浏览器视窗大小的变动，借助媒体查问，实现不一样的布局。

然而，在现如今，大部分 PC 端页面应用的是基于 Flex/Grid 的弹性布局。

很多时候，当内容数不确定的时候，即使是雷同的浏览器视窗宽度下，元素的布局及宽度可能也是不统一的。

思考上面这种状况：

<!-- 状况一  -->
<ul class="wrap">
    <li></li>
    <li></li>
    <li></li>
</ul>
<!-- 状况二  -->
<ul class="wrap">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>


.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
li {
    width: 190px;
    height: 100px;
    flex-grow: 1;
    flex-shrink: 0;
}

这种状况下，如果须要在不同宽度下对最初一个元素做一下解决，传统形式还是比拟麻烦的。

在这种状况下，容器查问（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 来模仿单个容器的宽度变动，在这种状况下，容器查问可能做到在不同宽度下，扭转容器外部的布局。

这样，就简略实现了一个容器查问性能：

留神，认真和下面的例子作比照，这里，浏览器的视口宽度是没有变动的，变动的只是容器的宽度！

媒体查问与容器查问的异同，通过一张简略的图看看，外围的点在于容器的宽度发生变化时，视口的宽度不肯定会发生变化：

咱们简略拆解下上述的代码，十分好了解。

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

对于容器查问更为具体的语法，我倡议还是上 MDN 或者标准具体看看 — MDN — CSS Container Queries

在第一次看到这个语法之后，我最先想到的场景便是字体的自适应大小。

咱们来看这样一个场景，很多时候，咱们无奈预估文案内容的多少。因而，会心愿当内容较多时，字体较小，而当内容有余一行或者非常少的时候，字体较大：

CodePen Demo — Container Quries Demo

当然，现阶段我临时没有试出来在容器查问中，容器的宽度可能随着输出的变动动静扭转容器大小，这里目前有点瑕疵，是个须要持续钻研的点。

当然，在那些可能当时晓得不同宽度，预设不同布局的场景下，容器查问的用武之地是十分之大的。

咱们能够 利用它疾速构建在容器不同宽度下的不同体现。

譬如这样一个 DEMO：

CodePen Demo — CSS Container Queries

总得来说，容器查问，还是处于比拟晚期的倒退之中，许多有意思的用法还有待开掘。但它的确算得上是 CSS 往年比拟大的一个变革。

好了，本文到此结束，心愿本文对你有所帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

关于前端:新时代布局新特性-容器查询

响应式过往的痛点

容器查问的能力

对于容器查问的一些思考

最初