首页 >> HTML+CSS >> 用CSS Grid伪造容器查询

用CSS Grid伪造容器查询

287865 2021-02-23 0
浏览次数79

容器查询是CSS中的一项(希望)即将发布的功能,通过该功能,您可以创建响应式设计,以响应其容器的尺寸(例如div或其他HTML元素),而不是整个页面的尺寸(我们目前正在处理媒体)查询。

这对于基于组件的设计非常有帮助,因为当您需要根据显示位置的不同而稍微不同地显示它们时,您不再需要创建组件的不同变体。

不幸的是,容器查询尚不存在。

最近,当我将Facebook在桌面上更新其丰富预览以根据视口宽度以三个离散宽度显示时,这成为我的问题。

这意味着我必须在“多窗格”侧面板中更新预览以仅以这三个宽度显示。不过,侧面板的大小可以独立于视口,因此不能选择媒体查询。因为它们使用离散的宽度,所以我也无法使用自动调整大小来使预览随着侧面板的宽度而增长。我需要容器查询。

注意:此后已经更新/恢复(或者我在某个A / B测试小组中),但是我想到的技术很有用,仍然可以撰写有关的文章。

使用CSS Grid和一些技巧,我设法以与容器查询非常接近的方式实现了这一点。

请注意:真正的容器查询将使您做的事情远远超过三个离散的宽度,因此这绝不是完全的替换。但这很有用,我认为这是一种了解的技术。

定义问题
我们正在尝试解决的问题是:根据视口的宽度,Facebook上的丰富预览宽度为500、590或680像素。在Polypane中,我们要显示侧边栏中适合的最大版本。

我们无法使用视口宽度,因为侧边栏的宽度与其无关。而且,我们不能将流体宽度与最大宽度结合使用,因为我们需要它来捕捉到这三个大小,因此其行为就像Facebook。

如果我们看这三个宽度,我们发现从500个像素开始,宽度每次增加90个像素。这将在以后使用。

获取预览完全正确可能会觉得迂腐,但我想在Polypane社会媒体预览是像素完美以及性格完美的,所以你可以确保你在Polypane看到的是什么人在社交媒体网站上看到。

这甚至不是Facebook,Twitter和LinkedIn的官方验证者。实际上,他们都使用了与实际位置不再匹配的过时设计,这使Polypane成为与现实相匹配的唯一场所。这需要很多工作,但这是完全值得的。
CSS网格
诚然,我在CSS Grid方面还没有做很多事情,所以我绝不是专业人士。我通常默认使用Flexbox,因为它适合我需要设计的大多数东西。这是我决定使用CSS网格还是Flexbox的方法:

我是否需要布置一堆元素?然后我用Flexbox
我是否有很多需要放置元素的区域?然后,我使用CSS Grid。
在这种情况下,该区域应该处于领先地位,这使我(连同Fronteers Slack的一些帮助)了解我是否可以为我的解决方案获取CSS Grid。在CSS Grid中,您可以在二维中定义一组区域(尽管在此示例中我们只需要一个维),这就是我们要做的。

设置
我们首先为我们的Facebook预览设置一个包装器,以使其存在: Facebook Preview

还有一些CSS将在包装器中设置网格,然后将预览放置在其中:

.wrapper {
display: grid;
max-width: 680px;
grid-template-columns: 500px repeat(auto-fill, 90px);
}

.preview {
grid-column: 1 / -1;
}

我们在这里所做的是设置一个CSS网格,该网格最大为680像素宽(预览应获得的最大宽度),其一列的宽度为500px(我们预览应获得的最小的宽度),然后具有“ repeat()”函数只要它们适合,就会添加90像素宽的列,这就是auto-fill函数的作用。

然后,为了进行预览,我们将设置grid-column为1 / -1。这意味着该元素从起点(1)的第一条网格线到终点(-1)的第一条网格线。从本质上讲,这意味着它将始终占据所有网格区域,而不管有多少网格区域。

这是一个实时的,可调整大小的预览,您可以尝试看看会发生什么。白色虚线表示网格区域的边界(拖动右下角):

如果仔细观察,您会发现它实际上不起作用:尽管Facebook预览捕捉到了680px和590px的宽度,但它并没有达到我们的500px的宽度。这是因为repeat()始终显示至少一列。我最初以为这将至少为零。

那么我们该如何解决呢?

正确处理
由于我们现在知道总是至少有90像素的一列,而我们想要的最小尺寸是500像素,因此我们需要CSS网格中的第一列为500-90 = 410像素宽。让我们尝试一下:
.wrapper {
display: grid;
max-width: 680px;
grid-template-columns: 410px repeat(auto-fill, 90px);
}

现在,预览区域将捕捉到680、590和500像素宽。我们创建了类似于容器查询的体验,其中根据可用的总宽度,我们将捕捉到一组固定大小。

如本文前面所述,Facebook已恢复/更新为可随视口缩放的流体列。该技术对于实现某些效果仍然有用。也许您希望事物以像素为单位对齐,或者拥有栅格系统,但想要在该栅格内保持固定宽度。

全部评论:0