做者:AAhmad Shadeed
译者:前端小智
来源:shadeed
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。前端
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及个人系列文章。git
在前端开发中常常须要按不一样屏幕尺寸来进设计达到PC和移动端响应式。咱们通常使用CSS媒体查询来检测视口宽度或高度,而后根据该模式改变设计。 这就是在过去10年中设计Web布局的方式。github
CSS容器查询,一个长期以来被web开发者要求的特性,很快就会出如今CSS中,在最新的 Chrome Canary 中,咱们能够经过 chrome://flags/#enable-container-queries
开启 Container Queries 功能。在本文中,我将介绍它是什么,它将如何改变做为设计师的工做流,等等。web
当前,咱们实现响应式,通常须要 UI 设计三个样式,分别是移动,平板电脑和桌面等。面试
在上图中,UI设计了三种版本,所以开发人员能够很好的实现它,这是很 nice的(这怕偷懒的 UI 只提供PC版本,这就很蛋疼)。chrome
如今咱们来看看使用媒体查询来看看怎么实现它。浏览器
上图是同一个组件,它有三个变体,即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%; } }
上面的变体取决于媒体查询或视口宽度。 这意味着,咱们没法根据其父宽度控制它们。 如今你可能会想,这里有什么问题? 喔或,这是一个很好的问题。app
问题是,只有当视口宽度大于特定值时,开发人员才会使用组件的变体。例如,若是我在平板中使用 featured
也就是 PC 的样式,它不能工做,为何?由于它的媒体查询宽度是大于1300px
。ide
不只如此,当内容低于预期时,咱们还会面临一个问题。有时,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容器查询的到来,咱们还将设计一个组件应该如何根据其父组件的宽度进行调整。
考虑如下设计:
请注意,咱们有标题、文章部分、引文和时事通信。它们中的每个都应该适应父视图的宽度。
我能够把这些组件分红如下几个部分
对于示例UI,下面是咱们如何划分组件。
当咱们在设计UI时以这种心态思考时,咱们能够开始考虑组件的不一样变体,这些组件依赖于它们的父宽度。
在下面的图中,请注意文章组件的每一个变化是如何以特定的宽度开始的。
做为一名设计师,一开始考虑父级宽度可能有点奇怪,但这是将来的发展方向。咱们为前端开发人员提供每一个组件的细节和版本,他们可使用它们。
不只如此,咱们还可能有一个组件的变体,它应该只显示在特定的上下文中。例如,事件列表页面。在这种状况下,清楚在何处使用此变体是很重要的。
问题是,如何告诉设计师应该在哪里使用这些组件。
良好的沟通是项目成功的重要因素。做为一名设计人员,咱们应该提供关于应该在何处使用组件变体的指导。它能够是一个完整的页面设计,也能够是一个显示如何使用每一个组件的简单图。
注意我是如何将每一个变体映射到一个特定的上下文,而不是一个视口。为了进一步证实这一点,咱们配合 CSS网格一块儿使用时,组件的行为会有何不一样。
在CSS网格中,咱们能够经过使用auto-fit关键字告诉浏览器,若是列的数量低于预期,咱们但愿展开列(您能够在这里阅读更多相关内容)。这一功能很是强大,由于它能够帮助咱们在相同的背景下呈现不一样的变体。
让一个组件对它的父宽度作出反应是很是有用的。正如刚才所看到的,咱们从新查看了桌面大小的页面,而且有不一样的部分,每一个部分的列数不一样。
重要的是要记住,组件的内部部分就像乐高游戏。咱们能够根据当前的变化对它们进行排序,但全部的东西都有一个限制。有时,前端开发人员最好处理一个全新的组件,而不是使用容器查询建立变体。
考虑如下。
它具备如下内容:
若是内部部分保持不变,或者至少不包含新的部分,咱们能够改变组件,并有以下所示的多种变化。
咱们来探索一些可使用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... 已收录,有一线大厂面试完整考点、资料以及个人系列文章。