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

不言而喻，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 复制 !DOCTYPE html html head meta content=IE=10 http-equiv=X-UA-Compatible / link href=photogallerystyles.css media=screen rel=stylesheet type=text/css style /style /head body div id=body div id=grid div id=text_box class=orange Text box/div div id=big_pic class=red img id=mainphoto alt=mainphoto src=images/img1.jpg/div div id=photos class=blue Photos/div div id=logo class=green div id=logotype CONTOSObrIMAGES/div div id=pagedesc Lightbox/div /div /div /div /body /html 创建网格元素并指定行和列 现在，创建网格元素并指定行和列。 首先添加 display 元素，并将其设置为 -ms-