[译]使用CSS的Grid布局进行简洁的媒体查询

in cn •  6 years ago 

原文来自 Concise Media Queries with CSS Grid

媒体查询通常用来控制网站上的响应式布局。以这种方式组织布局非常直观:在宽屏显示器上,我们希望以列的形式呈现信息,并且当屏幕宽度减小到阈值以下时,我们垂直堆叠元素。随着现代CSS,这类问题的解决方案变得比过去更简单了。我们不再必须使用像display:table这样的规则来实现我们梦想的布局。 像flexbox这样的CSS模块和一些聪明的框架使得网格很容易就能用最少的代码实现,但是借助CSS Grid,我们只需编写一次网格规则,就能在任何屏幕尺寸上实现所需的布局,而且没有借助任何框架。

举个例子,让我们来为用户资料做一个通用布局。 在资料中,我们有一个用户名、头像和简介。 我们的HTML可能看起来像这样:

使用flex布局怎样

我已经看到过很多媒体查询试图解决同样的问题。 一种常见的方法是通过媒体查询在一定宽度以上的容器上设置display:flex规则:

这取决于flexbox的初始flex-direction是row,而且flex-wrap的初始值是nowrap。 当子元素是块级元素时,如果取消了display:flex规则,他们会自然地垂直堆叠显示。 或者,我们可以编写一个媒体查询来切换flex-direction的值为row或column。

flexbox解决方案的缺点是,为了实现具有沿2个轴排列的块的复杂布局,例如其中有跨越2行(或跨越2列)的元素,我们必须:

  1. 嵌套元素;

  2. 确保margin和gutters(行和列之间的空白)保持相等;

  3. 逐个设置子元素的order以正确组织它们。

太头疼了! 如果我们将这方法用于任何复杂的布局,媒体查询将很快失控。

使用grid-template-areas

CSS Grid在快速组织布局方面无疑是具有优势的。CSS Grid即使是最简单的布局与flexbox相比的话也只需花很少的精力。 使用grid-template-areas属性,我们可以在媒体查询中使用单个规则编写响应式布局。 那是因为grid-template-areas一次性在两个轴上定义了视觉网格系统。看一下:

此规则告诉容器有三个部分:“名称”、“头像”和“简介”,第一行中并排的是头像和用户名,第二行中的简介部分跨越两列。 此规则的神奇之处在于列数是由属性值推理得来的。由一个或多个空格分隔的名称定义为一列(并且每行必须定义相同数量的列)。为了清楚起见,我这里将一行代码分成了不同的行让网格的结果更形象。接下来我们的子元素只需告诉grid它们出现在哪个部分,容器就会完成剩余的工作:

现在,一个简单的媒体查询就可以重新布置grid template用来适应我们的响应式布局:

这样子我们的子元素就会在屏幕小于700px时垂直堆叠了!

当重新排列元素时保持可读性

当重新排列元素时,重要的是为了可读性要确保文档中结构按逻辑排列。

比如现在,如果我们想先显示用户的头像,然后下面是他们的名字怎么办? 我们可以简单地在同一个属性下重新排序区域名:

此外,我们可以使用单个规则重新排列任意布局中的网格区域,并且因为CSS Grid系统通过grid-gap规则来处理gutter,所以我们不必担心子元素上的任何附加margin。因此,下次处理有复杂响应行为的布局时,请选择CSS Grid来在计算机前少花点时间吧。

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!