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

《如何使用 CSS 网格创建自适应布局 (Windows)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、不言而喻，Web开发人员在布局网页时有许多选择。在确定使用哪个方法时，应确保你的布局可适应不同的设备、方向和屏幕尺寸，这是一个重要考虑事项。网格布局是一种新的布局方法，该方法使你能够基于固定数量、浏览器窗口中的可用空间或二者组合划分网页主要区域的空间。由于网格布局使你能够将元素按列和行对齐，但没有内容结构，因此它还支持HTML或级联样式表(CSS)表格无法实现的方案——如本文中介绍的方案。此外，通过将网格布局与媒体查询结合使用，可以使布局无缝地适应设备外形尺寸、方向、可用空间等因素的变化。CSS网格布局规范当前是一个万维网联合会(W3C)工作草案，并在Inte

2、rnetExplorer10中以供应商前缀的形式得到部分支持。有关支持的属性的完整列表，请参见MSDN上的网格布局。因为网格布局规范仍处于开发阶段，所以InternetExplorer10中的支持可能与规范中设计的支持不完全对应。这里我们将指导你创建一个简单的“光框”页面，用于查看图片库中的图片。我们使用网格布局组织页面的内容，并使用媒体查询优化该布局，以便按纵向或横向方式进行查看。在纵向布局中，浏览器窗口的高度大于其宽度；在横向布局中，浏览器窗口的宽度大于其高度。本主题包括以下部分：·设计页面·构建网格·构建页面·创建网格元素并指定行和列·关于分数单位·将页

3、面元素分配给列和行·对齐网格项·将网格与媒体查询一起使用·使用网格创建元素叠加·总结·相关主题设计页面我们希望此光框页面在采用新WindowsUI环境的InternetExplorer中占用整个屏幕，并且无任何滚动。当然，此页面应在桌面版InternetExplorer中同样可用，而且能够很好地适应该浏览器的镶边。以下草图大致说明了光框页面在横向布局中的外观。我们已选择创建此草图，并假设浏览器占用纵横比为16:9的整个宽屏显示。在此图中，A是徽标专用的小区域，B是图片标题或说明区，C是主图片查看区，D是库中其他图片的缩略图区。因为光框页面专用于全屏查看，所以我

4、们必须考虑不同的屏幕尺寸。页面的焦点是大图片。因此，当屏幕尺寸增加时，应让图片面板(C)扩展。但是，我们还应防止面板A扩展、防止面板B水平扩展，并防止面板D垂直扩展。构建网格此方案非常适用于网格布局。为帮助构建网格，我们将添加虚线来完成已经不可视的网格线。为保持页面元素之间有一定的间距，并防止设计看起来过于拥挤，我们将添加一些空白区。空白区可以是具有固定宽度或高度的额外列和行。在此图片中，紫色虚线表示网格元素或网格布局容器。红色虚线表示网格线。此网格总共有五行和三列：·空白区是第二和第四行以及第二列。·第一和最后一行是固定高度，考虑了面板A和D的固定高度·第三

5、行的高度可变，这样该布局可扩展到任何屏幕·第一列是固定宽度，考虑了面板A和B的固定宽度·最后一列的宽度可变，这样该布局可扩展到任何屏幕构建页面现在我们开始构建网格。首先，我们编写一个简单的HTML来获得基本的页面结构。请注意，不必设置各部分的顺序，你期望的是获得一个草案，而这正是网格的优点之一：你可以按所需的方式在文档对象模型(DOM)顺序中对元素重新排序。HTML复制

6、rystyles.css"media="screen"rel="stylesheet"type="text/css">Textbox