通过

IE10 平台预览版和 CSS 自适应布局功能

  • 项目

 

首个 IE10 平台预览版包括许多新的 CSS3 功能，所有这些功能都在不断演变的 Web 标准中得以实
现在本文中，我们将了解三种 CSS 功能——CSS3 网格布局、弹性框布局及多栏布局。CSS 网格布局和弹性框布局均有助于开发人员为复杂的 Web 应用程序和网站创建布局。多栏布局旨在帮助开发人员创建高级的文本布局，以提高 Web 的可阅读性。这三项新的 CSS 功能可使对 Web 设计人员而言长期存在且一直增长的问题变得更加简单，即，更有效地在众多设备和分辨率下使用屏幕实际使用面积。

CSS3 网格布局

让我们从CSS 网格布局（简称“网格”）开始，Microsoft 最近将该方案提交给 CSS 工作组。网格的核心思想在于用 CSS 将网页分割为一组定义的行和列，然后使用 CSS 根据这些行和列定位元素，并确定元素大小。由于行和列的尺寸可定义为固定的、灵活的或根据内容调整的，因此不管屏幕大小如何，都可以很容易地构建完全填充整个屏幕的布局。

例如，下图显示了一个典型的游戏板，该游戏板已被分割为两列三行，包含多个元素。一些元素需要保持不变，而另一些需要随着浏览器窗口的不同尺寸而扩大或缩小。

clip_image002

有了网格，您就可以从以下标记开始完成此设计。

<div id="grid">
    <div id="title">Game Title</div>
    <div id="score">Score</div>
    <div id="stats">Stats</div>
    <div id="board">Board</div>
    <div id="controls">Controls</div>
</div>

将具有 ID “grid” 的 div 设定为显示 ： 网格的网格容器，并且将各行和列定义为弹性（即，根据可用空间扩大或缩小）或自动调整，可根据放置在行内的最大元素调整行或列的宽度或高度。

#grid {
    display:-ms-grid;
    -ms-grid-columns:auto 1fr;
    -ms-grid-rows:auto 1fr auto;
}

定义网格后，您可以将各个元素放置到特定网格单元中。如以下标记所示，您不仅可以指定将元素放在 CSS 的具体某行或某列中，还可以指定元素应横跨多少行和/或列，指定元素在单元格或单元格范围内是水平对齐还是垂直对齐。可将元素指定为固定尺寸，或指定元素填充其所在单元格的可用宽度或高度。在上述示例中，“board”元素随着屏幕增长，而其他元素（比如“title”元素）则保持固定尺寸。（请注意，由于在使用 IE10 时，这仍是一项新规范，因此以下所有的网格属性都带有前缀 “-ms-”。）

#title { -ms-grid-column:1; -ms-grid-row:1 }
#score { -ms-grid-column:1; -ms-grid-row:3 }
#stats { -ms-grid-column:1; -ms-grid-row:2; -ms-grid-row-align:start }
#board { -ms-grid-column:2; -ms-grid-row:1; -ms-grid-row-span:2 }
#controls { -ms-grid-column:2; -ms-grid-row:2; -ms-grid-column-align:center;

将网格和 CSS3 媒体查询组合，您可以为不同的分辨率、纵横比和屏幕方向确定完全不同的布局。例如，您可以为不同的屏幕尺寸定义不同数量的行或列（例如，为垂直的“竖向”布局定义较多行，为水平的“横向”布局定义较多列），或指定行和列具有不同尺寸。您可以使用 IE10 平台预览版，将窗口的宽度由宽调整为窄，从而利用 Griddle 测试驱动亲身尝试。

此外，由于元素在网格中的位置与他们的指定顺序无关，即，元素位置单纯地由 CSS 指定，而不是由它们在 HTML 标记中的顺序指定；因此很容易根据不同的屏幕尺寸赋予元素不同的排列，或者在某些布局中甚至可以忽略一些元素。例如，您可能希望在针对手机或平板电脑设计的小分辨率上不显示特定工具栏或侧栏，而在针对宽屏、高分辨率的台式机屏幕设计的布局上则希望显示大量内容元素。最重要的是，所有这些不同效果都可以完全仅使用 CSS 实现；由于内容的视觉显示完全与 HTML 隔离，因此无需为移动和桌面设备准备不同的 HTML 文件。

CSS3 弹性框布局

网格适用于自适应布局，但并非唯一可用的选项。在 IE10 平台预览版中，开发人员也可使用弹性框布局（简称“弹性框”），以可流动、与来源无关的方式布置元素。弹性框和网格有许多共同之处：元素均放在父容器内，根据父容器的大小调整元素大小和位置。弹性框和网格之间的重大差异在于，弹性框沿一条轴线（垂直或水平）布置其内容，而网格同时沿行和列布置内容。另外，弹性框的默认行为是沿容器一侧“堆叠”元素，而网格的默认行为则是将元素放在第 1 行第 1 列的“顶部”。

利用弹性框实现的许多行为也可用网格实现，反之亦然；但弹性框最适合于创建各个组件和集合（例如，工具栏、图像集），而网格则旨在创建全页布局，适用于各个元素重叠的组件。

弹性框的基本使用是显而易见。以下示例在开始时将三个按钮（基础媒体工具栏的各个组件）布置在容器 div 中。默认情况下，这些按钮的布局显示为：内联块，这就意味着它们具有固有尺寸，不会随着容器尺寸的改变而改变。这就会导致布局不适应可用空间的空白空间未得到利用。

<div id="playControl">
    <button>Back</button>
    <button>Play</button>
    <button>Forward</button>
</div >

前进

播放

后退

clip_image004

以上标记的结果

有了弹性框布局（即，显示 : 框），您就可以指定让按钮容器布置其子元素，使得每个子元素平等地分享容器中的可用空间。现在，按钮完全填充容器；且不管容器尺寸如何改变，按钮都会完全填充容器。这种方法对弹性网格单元非常适用——如果外部容器是为填充弹性网格单元而调整尺寸的 div，那么不仅总体布局会随着屏幕大小的改变而改变，而且各个工具栏也会随之改变。

#playControl { display:-ms-box; }
button { -ms-box-flex: 1; }

播放

前进

后退

clip_image006

以上标记的结果

弹性框的另一项有用功能在于能够充当任意数量的项目的容器，尤其是在使用框线属性的时候更是如此。具体地讲，显示：框的容器元素（比如 一个div）集合将自动堆叠该容器中的元素使其朝向容器的一侧（对大部分西方语言而言，堆叠在容器左侧）。如果将框线的属性设定为 multiple，那么在垂直空间容许的情况下，弹性框容器会将内容元素配置在多行内容中。这就意味着弹性容器元素可自动排列其内容，最大程度地利用空间，而设计人员无需了解容器中有多少项目且不必清楚地放置每个项目。

在以下示例中，当容器足够宽时，将相同的五个项目布置在一列中；但是当容器太窄时，将第二列项目创建在第一列项目的下方。当动态数据查询返回未知数目的项目且您希望简单、直接地显示这些项目时，可使用这种方法。

<div id="collectionContainer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div >
#collectionContainer { -ms-box-lines:multiple; }

clip_image008

clip_image010

CSS3 多栏布局

最后，您可以使用 CSS 多栏布局，将内容布置到网页上的多个列中。印刷行业的报纸和杂志使用这种方法，将内容归类到多个平行列中，这样就更容易逐行阅读和追踪文本。

有了多栏布局，用几行 CSS 就可以将内容归类。例如，将行 “column-count:3” 放置在封闭 div 上，就可快速将下图中的内容归类为 3 列。

<div id="beagleContent">
    <img src="3Beagles.jpg" style="float:right">
    Lorem ipsum...
</div >

clip_image012

#beagleContent { column-count: 3; }

clip_image014

多栏布局提供众多选择，可指定内容的布局方式，包括可以设定固定列数、最小列宽、列之间的间隙大小、列规则，这些都是列之间的装饰性边框。多栏布局还可以指定应该分列的位置，且可以自动平衡列之间的内容，这样所有列都具有相同长度。另外，请注意由于多栏是 W3C 候选建议，因此使用这些属性时无需 -ms- 标签。您可以使用 IE10 平台预览版和其他浏览器尝试 CSS3 多栏布局示例。

您的反馈

我们很高兴在 IE10 平台预览版中包含 CSS 网格、弹性框和多栏，这样开发人员就可以学习、试验并提供反馈。我们将继续与 Web 社区和W3C CSS 工作组就 CSS 网格和其他规范进行合作，并提交随附的测试用例。我们共同使 CSS3 自适应布局成为互操作 Web 平台的另一个可靠部分。

—Chris Jones，项目经理