六虎

新时代布局新特性 — 容器查询

作者：

沉默王二

在

总算，在漫长的等候下，容器查询（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 来模拟单个容器的宽度改动，在这种状况下，容器查询能够做到在不同宽度下，改动容器内部的布局。

这样，就简略完成了一个容器查询功能：

新时代布局新特性 -- 容器查询

留意，细心和上面的例子作比照，这儿，浏览器的视口宽度是没有改动的，改动的只是容器的宽度！

媒体查询与容器查询的异同，经过一张简略的图看看，中心的点在于容器的宽度发生改动时，视口的宽度不一定会发生改动：

新时代布局新特性 -- 容器查询

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

  1. 在 .warp 的款式中，经过 container-name: wrap 注册一个容器
  2. 注册完容器之后，便能够经过 @container wrap () 容器查询语法，在内部写入不同状况下的别的一套款式
  3. 这儿 @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 本年比较大的一个改造。

最终

好了，本文到此结束，期望本文对你有所协助 :)

想 Get 到最有意思的 CSS 资讯，千万不要错失我的大众号 — iCSS前端趣闻

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

假如还有什么疑问或许主张，能够多多沟通，原创文章，文笔有限，孤陋寡闻，文中若有不正之处，万望奉告。

更多文章