关于css:学姐叫我看-CSS-新出的容器查询然后把公共组件重构成响应式的

作者：AAhmad Shadeed
译者：前端小智
起源：shadeed

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

在前端开发中常常须要按不同屏幕尺寸来进设计达到 PC 和挪动端响应式。咱们个别应用 CSS 媒体查问来检测视口宽度或高度，而后依据该模式扭转设计。这就是在过来 10 年中设计 Web 布局的形式。

CSS 容器查问，一个长期以来被 web 开发者要求的个性，很快就会呈现在 CSS 中，在最新的 Chrome Canary 中，咱们能够通过 chrome://flags/#enable-container-queries 开启 Container Queries 性能。在本文中，我将介绍它是什么，它将如何扭转作为设计师的工作流，等等。

以后响应设计状态

以后，咱们实现响应式，个别须要 UI 设计三个款式，别离是挪动，平板电脑和桌面等。

在上图中，UI 设计了三种版本，因而开发人员能够很好的实现它，这是很 nice 的(这怕偷懒的 UI 只提供 PC 版本，这就很蛋疼)。

当初咱们来看看应用媒体查问来看看怎么实现它。

上图是同一个组件，它有三个变体，即 default、Card 和Featured。在 CSS 中，开发人员须要创立此组件的三个变体，其中每个组成均是惟一的。

.c-media {
  /* the default styles */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (min-with: 400px) {
  .c-media--card {display: block;}

  .c-media--card img {margin-bottom: 1rem;}
}

@media (min-with: 1300px) {
  .c-media--featured {
    position: relative;
    /* other styles */
  }

  .c-media--featured .c-media__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

下面的变体取决于媒体查问或视口宽度。这意味着，咱们无奈依据其父宽度管制它们。当初你可能会想，这里有什么问题？喔或，这是一个很好的问题。

问题是，只有当视口宽度大于特定值时，开发人员才会应用组件的变体。例如，如果我在平板中应用 featured 也就是 PC 的款式，它不能工作，为什么? 因为它的媒体查问宽度是大于1300px。

不仅如此，当内容低于预期时，咱们还会面临一个问题。有时，UP 主可能只会增加一篇文章，而设计是蕴含其中的三篇。在这种状况下，要么咱们将有一个空的空间，要么我的项目将扩大以填满可用的空间。思考下图：

在第一种状况下 (Case 1)，文章太宽，会导致封面变形。第二种状况下(Case 2) 也是一样的问题

如果应用容器查问，咱们能够通过查问父组件来决定如何显示特定组件来解决这些问题。思考下图，它展现了咱们如何应用容器查问来修复这个问题。

这样的话，如果咱们把思路转向组件的父组件呢? 换句话说，如果咱们查问父组件，并依据父组件的宽度或高度来决定组件应该是什么样子的呢? 咱们来看下 容器查问 的概念。

什么是容器查问

首先，让我定义容器。它就蕴含另一个元素的元素，个别咱们叫它 wrapper。

最新的 Chrome Canary 中，咱们能够通过 chrome://flags/#enable-container-queries 开启 Container Queries 性能。

当一个组件被搁置在一个项中，它就被蕴含在该项中。这意味着，咱们能够查问父元素的宽度并据此批改它。思考下图

留神，每个卡片都有一个黄色的轮廓线，代表每个组件的父组件。应用 CSS 容器查问，咱们能够依据父组件的宽度批改组件。

<div class="o-grid">
  <div class="o-grid__item">
    <article class="c-media"></article>
  </div>
  <!-- + more items -->
</div>

该组件是具备类 .c-media 的项，它的父级是 .o-grid__item 元素。在 CSS 中，咱们能够执行以下操作：

.o-grid__item {contain: layout inline-size style;}

.c-media {/* Default style */}

@container (min-width: 320px) {
  .c-media {/* The styles */}
}

@container (min-width: 450px) {
  .c-media {/* The styles */}
}

首先，咱们通知浏览器，每个带有 class .o-grid项的元素都是一个容器。而后，再通知浏览器，如果父元素的宽度等于或大于 500px，它应该以不同的形式显示。对于 700px 查问也是如此。这就是 CSS 容器查问的工作原理。

此外，咱们能够在任何想要的中央定义它们，这意味着如果须要，咱们能够在顶级容器上进行查问。当初大家曾经了解了 CSS 容器查问的根本思维，在看看上面图片加深一下映像。

在右边，这是一个正在调整大小的视口。在左边，一个依据父组件宽度更改的组件。这就是容器查问的性能和用处。

在设计时思考容器查问

作为一名 UI，你须要适应这个革命性的 CSS 个性，因为它将扭转咱们为网页设计的形式。咱们不仅为屏幕尺寸设计，还思考组件在容器宽度变动时应如何适应。

当初，设计零碎变得越来越风行。设计团队将构建一组规定和组件，以便其余成员能够基于它们构建页面。随着 CSS 容器查问的到来，咱们还将设计一个组件应该如何依据其父组件的宽度进行调整。

思考以下设计:

请留神，咱们有题目、文章局部、引文和时事通信。它们中的每一个都应该适应父视图的宽度。

我能够把这些组件分成以下几个局部

• Viewport (媒体查问)
• Parent（容器查问）
• 通用: 不受影响的组件，如按钮、标签、段落。

对于示例 UI，上面是咱们如何划分组件。

当咱们在设计 UI 时以这种心态思考时，咱们能够开始思考组件的不同变体，这些组件依赖于它们的父宽度。

在上面的图中，请留神文章组件的每个变动是如何以特定的宽度开始的。

作为一名设计师，一开始思考父级宽度可能有点奇怪，但这是将来的倒退方向。咱们为前端开发人员提供每个组件的细节和版本，他们能够应用它们。

不仅如此，咱们还可能有一个组件的变体，它应该只显示在特定的上下文中。例如，事件列表页面。在这种状况下，分明在何处应用此变体是很重要的。

问题是，如何通知设计师应该在哪里应用这些组件。

与开发人员沟通

良好的沟通是我的项目胜利的重要因素。作为一名设计人员，咱们应该提供对于应该在何处应用组件变体的领导。它能够是一个残缺的页面设计，也能够是一个显示如何应用每个组件的简略图。

留神我是如何将每个变体映射到一个特定的上下文，而不是一个视口。为了进一步证实这一点，咱们配合 CSS 网格一起应用时，组件的行为会有何不同。

在 CSS 网格中，咱们能够通过应用 auto-fit 关键字通知浏览器，如果列的数量低于预期，咱们心愿开展列(您能够在这里浏览更多相干内容)。这一性能十分弱小，因为它能够帮忙咱们在雷同的背景下出现不同的变体。

让一个组件对它的父宽度做出反馈是十分有用的。正如方才所看到的，咱们从新查看了桌面大小的页面，并且有不同的局部，每个局部的列数不同。

在设计响应式组件时防止复杂性

重要的是要记住，组件的外部局部就像乐高游戏。咱们能够依据以后的变动对它们进行排序，但所有的货色都有一个限度。有时，前端开发人员最好解决一个全新的组件，而不是应用容器查问创立变体。

思考以下。

它具备以下内容：

• 头像
• 名称
• 按钮
• 键 / 值对

如果外部局部放弃不变，或者至多不蕴含新的局部，咱们能够扭转组件，并有如下所示的多种变动。

CSS 容器查问用例

咱们来摸索一些能够应用 CSS 容器查问实现的用例。

聊天列表

我在 Facebook messenger 上看到了这种模式。聊天列表依据视口宽度扭转。咱们能够应用 CSS 容器查问来实现它。

当有足够的空间时，清单将开展并显示每个用户的名称。聊天列表的父元素能够是动静调整大小的元素(例如: 应用 CSS 视口单元，或 CSS 比拟函数)。

// HTML
<div class="content">
  <aside>
    <ul>
      <li>
        <img src="shadeed.jpg" alt="Ahmad Shadeed" />
        <span class="name">Ahmad Shadeed</span>
      </li>
    </ul>
  </aside>
  <main>
    <h2>Main content</h2>
  </main>
</div>

// CSS
.content {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
}

aside {contain: layout inline-size style;}

@container (min-width: 180px) {
  .name {display: block;}
}

aside 宽度是 0.4f，所以它是动静宽度。另外，我增加了contain 属性。而后，如果容器宽度大于 180px，将显示用户名。

另一个相似的用例是侧导航。咱们能够切换导航项标签的地位，从在新行或旁边的图标。

当容器很小时，导航项标签是如何从一个新行切换的，当有足够的空间时，导航项标签是如何凑近导航图标的。

示例地址：https://codepen.io/shadeed/pe…

~ 完，我是小智，我要去刷碗了，咱们下期见!

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://ishadee.com/article/c…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。