如何使用 CSS 网格创建自适应布局 (Windows).doc

不言而喻，Web 开发人员在布局网页时有许多选择。在确定使用哪个方法时，应确保你的布局可适应不同的设备、方向和屏幕尺寸，这是一个重要考虑事项。网格布局是一种新的布局方法，该方法使你能够基于固定数量、浏览器窗口中的可用空间或二者组合划分网页主要区域的空间。由于网格布局使你能够将元素按列和行对齐，但没有内容结构，因此它还支持 HTML 或级联样式表 (CSS) 表格无法实现的方案如本文中介绍的方案。此外，通过将网格布局与媒体查询结合使用，可以使布局无缝地适应设备外形尺寸、方向、可用空间等因素的变化。CSS 网格布局规范当前是一个万维网联合会 (W3C) 工作草案，并在 Internet Explorer 10 中以供应商前缀的形式得到部分支持。有关支持的属性的完整列表，请参见 MSDN 上的网格布局。因为网格布局规范仍处于开发阶段，所以 Internet Explorer 10 中的支持可能与规范中设计的支持不完全对应。这里我们将指导你创建一个简单的“光框”页面，用于查看图片库中的图片。我们使用网格布局组织页面的内容，并使用媒体查询优化该布局，以便按纵向或横向方式进行查看。 在纵向布局中，浏览器窗口的高度大于其宽度；在横向布局中，浏览器窗口的宽度大于其高度。本主题包括以下部分： 设计页面 构建网格 构建页面 创建网格元素并指定行和列 关于分数单位 将页面元素分配给列和行 对齐网格项 将网格与媒体查询一起使用 使用网格创建元素叠加 总结 相关主题设计页面我们希望此光框页面在采用新 Windows UI 环境的 Internet Explorer 中占用整个屏幕，并且无任何滚动。当然，此页面应在桌面版 Internet Explorer 中同样可用，而且能够很好地适应该浏览器的镶边。以下草图大致说明了光框页面在横向布局中的外观。我们已选择创建此草图，并假设浏览器占用纵横比为 16:9 的整个宽屏显示。在此图中，A 是徽标专用的小区域，B 是图片标题或说明区，C 是主图片查看区，D 是库中其他图片的缩略图区。因为光框页面专用于全屏查看，所以我们必须考虑不同的屏幕尺寸。页面的焦点是大图片。因此，当屏幕尺寸增加时，应让图片面板 (C) 扩展。但是，我们还应防止面板 A 扩展、防止面板 B 水平扩展，并防止面板 D 垂直扩展。构建网格此方案非常适用于网格布局。为帮助构建网格，我们将添加虚线来完成已经不可视的网格线。为保持页面元素之间有一定的间距，并防止设计看起来过于拥挤，我们将添加一些空白区。空白区可以是具有固定宽度或高度的额外列和行。在此图片中，紫色虚线表示网格元素或网格布局容器。红色虚线表示网格线。此网格总共有五行和三列： 空白区是第二和第四行以及第二列。 第一和最后一行是固定高度，考虑了面板 A 和 D 的固定高度 第三行的高度可变，这样该布局可扩展到任何屏幕 第一列是固定宽度，考虑了面板 A 和 B 的固定宽度 最后一列的宽度可变，这样该布局可扩展到任何屏幕构建页面现在我们开始构建网格。首先，我们编写一个简单的 HTML 来获得基本的页面结构。请注意，不必设置各部分的顺序，你期望的是获得一个草案，而这正是网格的优点之一：你可以按所需的方式在文档对象模型 (DOM) 顺序中对元素重新排序。HTML复制 Text box Photos CONTOSOIMAGES Lightbox 创建网格元素并指定行和列现在，创建网格元素并指定行和列。首先添加 display 元素，并将其设置为 -ms-grid。此操作将创建网格元素。在网格元素中，我们使用 -ms-grid-columns 属性在空格分隔的列表中指定每个列的宽度。同样，我们使用 -ms-grid-rows 属性在空格分隔的列表中指定每个行的高度。对于 ID 为 grid 的元素，我们的 CSS 如下所示：CSS复制#grid height: calc(100vh - 65px); /* 65px to account for scrollbar */; display: -ms-grid; -ms-grid-columns: 200px 25px 1fr; -ms-grid-rows: 160px 25px 1fr 25px 200px; border: 1px solid red; /* for a visual guide */关于分数单位要让网格能够根据可用的空间调整自身的大小，我们使用“分数单位”(fr)。分数单位的大小取决于总可用空间和指定的分数单位总数。在光框示例页面中，我们仅使用一个分数单位，但在更复杂的布局中也可以使用一个分数单位。例如，请考虑以下情况：指定的四个列长分别是自动、100 像素、1 个分数单位和 2 个分数单位。各列将显示为： 列 1（auto 关键字）：列适合于列中的内容。 列 2 (100px)：列的宽度为 100 像素。 列 3 (1fr）：列占据剩余空间的一个分数单位。 列 4 (2fr）：列占据剩余空间的两个分数单位。由于此网格中总共有三个分数单位，所以列 3 被分配了剩余空间的 1/3即 3 个分数单位中的 1 个分数单位。列 4 则被分配了剩余空间的 2/3。将页面元素分配给列和行如果你现在查看页面，页面显然还不完善。所有不同的页面元素相互叠加，因为我们还没有定义放置每个元素的列。通过使用 -ms-grid-row、-ms-grid-column、-ms-grid-row-span 和 -ms-grid-column-span 属性的组合可以做到这一点。-ms-grid-row 和 -ms-grid-column 属性在应用到页面元素时，可以指定页面元素开始的网格单元。在从左到右、从上至下的语言中，-ms-grid-row 属性指定元素将占用的最上一行。同样，可以使用 -ms-grid-column 属性指定元素将占用的最左一列。-ms-grid-row-span 和 -ms-grid-column-span 属性应用到页面元素时，可以指定页面元素将跨多少行和列。请注意，如果试图跨越超出网格中所指定的列或行数，将隐式创建其他列或行，并将超出指定数量的每个列或行的宽度或高度都设置为 auto（适合于内容）。CSS复制#text_box -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-row-span: 3; padding: 15px;#big_pic -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-row-span: 3; padding: 15px;#photos -ms-grid-row: 5; -ms-grid-column: 3; padding: 15px;#logo -ms-grid-row: 1; -ms-grid-column: 1; text-align: center; padding: 20px;在添加这些选择器以及其他页面元素的样式设置之后查看页面。对齐网格项页面外观看上去不错，但最好让图片在其面板中居中。为完成此任务，我们将使用 -ms-grid-row-align 和 -ms-grid-column-align 属性。这两个属性分别定义如何对齐行或列中的项。在我们的示例中，我们在 big_pic 的 ID 选择器中将这两个属性都设置为 center：CSS复制#big_pic -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-row-span: 3; padding: 15px; -ms-grid-row-align: center; -ms-grid-column-align: center;你可以查看此版本的页面。将网格与媒体查询一起使用我们的布局在横向模式中看起来不错。当查看设备是纵向模式时，又会怎样呢？在此示例中，我们可以使用媒体查询。通过使用媒体查询，我们可以重新定义布局的各个方面，以便将其定制为纵向布局。要将特定于纵向布局的样式添加到样式表，应首先添加媒体查询语法：CSS复制media all and (orientation: portrait) 在媒体查询用语中，纵向布局定义其宽度大于其高度的页面。相反，页面高度大于其宽度时，页面为横向。现在，我们为其他页面元素添加新的网格布局和一些新样式。我们将在媒体查询的花括号之间添加这些样式：CSS复制#grid -ms-grid-columns: 150px 25px 1fr; -ms-grid-rows: 100px 25px 1fr 25px 100px;#text_box -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-row-span: 1;#big_pic -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row-span: 1;#photos -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row-span: 1;#logo -ms-grid-row: 1; -ms-grid-column: 1; text-align: center; padding: 20px;#logotype font-size: 15px;#pagedesc font-size: 12px;#mainphoto width: 100%; border-width: 10px; border-color: white;现在，你可以查看完成的页面。如果你没有可以用来以纵向模式查看页面的设备，请在桌面版 Internet Explorer 中打开页面，并调整其大小，使其宽度小于其高度。使用网格创建元素叠加CSS 网格为页面布局创造了更多可能性。例如，使用网格可以轻松创建内容叠加，将内容叠加与不透明度属性组合在一起时，可以在图像上创建