第7章 布局(二)

7.3 固定宽度、流体和弹性布局

到目前为止，所有示例都使用以像素为单位定义的宽度。这种布局类型称为固定宽度的布局，由于它是刚性的，有时候也称为 "冰布局"。固定宽度的布局非常常见，因为它们使开发人员对布局和定位有更大的控制能力。如果将设计的宽度设置为 720 像素，它就总是 720像素宽。这样的话，如果想让一个品牌图像横跨设计的顶部，那么你知道这个图像需要宽 720 像素。知道每个元素的精确宽度，就能够对它们进行精确地布局，而且知道所有东西在什么地方。这样的可预测性使固定宽度的布局成为迄今为止最常用的布局方法。

但是，固定宽度的布局有缺点。首先，因为它们是固定的，所以无论窗口的尺寸有多大，它们的尺寸总是不变。因此，它们无法充分利用可用空间。在高分辨率的屏幕上，为 800X600 分辨率创建的设计会缩小并且出现在屏幕的中间。反之，为 1024X768 分辨率创建的设计在低分辨率的屏幕上会导致水平滚动。随着屏幕尺寸范围越来越大，固定宽度设计的缺点越来越明显了。

固定宽度设计的另一个问题涉及行长和文本的易读性。固定宽度的布局对于浏览器默认文本字号往往是合适的。但是，只要将文本字号增加几级，边栏就会挤满空间并且行长太短，阅读起来不舒服。

为了解决这些问题，可以使用流体布局或弹性布局替代固定宽度的布局。

7.3.1 流体布局

在使用流体布局时，尺寸是用百分数而不是像素设置的。这使流体布局能够相对于浏览器窗口进行伸缩。随着浏览器窗口变大，列变宽。相反，随着窗口变小，列的宽度减小。流体布局可以非常高效地使用空间，最好的流体布局甚至不会引起用户的注意。

但是，流体布局也不是没有问题的。在窗口宽度小的时候，行变得非常窄，很难阅读。在多列布局中尤其如此。因此，有必要添加以像素或 em 为单位的 min-width，从而防止布局变得太窄。

与之相反，如果设计跨越浏览器窗口的整个宽度，那么行就变得太长，也很难阅读。可以采取几个措施来避免这个问题。首先，不要跨越整个宽度，而是让容器只跨越宽度的一个百分比，比如 85%。还可以考虑用百分数设置填充和空白边。这样的话，填充和空白边的宽度将随着窗口的尺寸而变，防止列太快地变得过宽。最后，对于非常严重的情况，也可以选择以像素设置容器的最大宽度，以防止内容在大显示器上变得极宽。

可以使用这些技术将前面的固定宽度的三列布局转换为流体三列布局。首先，将容器宽度设置为窗口总宽度的百分数。在这个示例中，我选择 85%，因为这会在一定的屏幕尺寸范围中产生比较好的效果。接下来，将导航和内容区域的宽度设置为容器宽度的百分数。经过几次尝试之后发现，将导航区域设置为23%、将内容区域设置为 75%会产生比较好的效果。这在导航和内容区域之间留出 2% 的视觉隔离带，这可以防止任何舍入错误和宽度差错破坏布局：

#wrapper {

width: 85%;

}

#mainNav {

width: 23%;

float: left;

}

#content {

width: 75%;

float: right;

}

然后需要设置内容区域中列的宽度。这需要点儿技巧，因为内容 div 的宽度基于内容元素的宽度，而不是整个容器。如果希望 secondaryContent 的宽度与主导航相同，那么需要计算出容器宽度的 23% 是内容区域宽度的百分之多少。将 23 (导航宽度) 除以 75 (内容区域的宽度)，再乘以 100 ，结果大约是 31%。希望两个列之间的隔离带宽度与导航和内容区域之间的隔离带相同。使用同样的方法计算出大约 3%，这意味着主内容区域的宽度应该是 66%：

这产生一个最适合 1024X768 分辨率的流体布局，但是在更大和更小的屏幕分辨率上阅读起来也比较舒服 (见图 7-6)。

#mainContent {

width: 66%;

float: left;

}

#secondaryContent {

width: 31%;

float: right;

}

因为这个布局会恰当地伸缩，所以不需要添加 max-width 属性。但是，对于小尺寸，内容会太窄，所以可以在容器元素上设置最小宽度为 720 像素。

7.3.2 弹性布局

虽然流体布局可以充分利用可用空间，但是在大分辨率显示器上行仍然会过长，让用户不舒服。相反，在窄窗口中或者在增加文本字号时，行会变得非常短，内容很零碎。对于这个问题，弹性布局可能是一种解决方案。

弹性布局相对于字号 (而不是浏览器宽度) 来设置元素的宽度。通过以 em 为单位设置宽度，可以确保在字号增加时整个布局随之扩大。