4.5 弹性布局
4.5 弹性布局
当浏览流式布局的网站时，内容区可能变得太宽而降低了可读性。为了提高可读性，设计师尝试通过限制CSS的属性来限制布局的最大宽度。弹性（或者称为可缩放）布局采用了完全不同的方法来实现相同的效果。这种布局的基本思想是根据用户的字体大小而不是浏览器视口的大小来调整网页布局的宽度。像素是计算机屏幕上无法缩放的一个点，em则是字体的一个方形单位。根据用户对于字体尺寸的选择，em单位经常发生变化。相应的，设计师使用em单位，一种与弗雷元素尺寸相关的相对单位来表示字体的大小。通过为布局中的区块和字体使用em单位，设计师能够实现网页布局的整体缩放，保持内容区每行的宽度适中，实现接近现实的缩放效果。最后，当用户增加字体尺寸时，布局自动缩放，就像它们是一个有弹性的物体一样。由于不依赖于浏览器视口的变化，弹性布局有点类似于固定宽度布局，同时具备了它的优点和缺点。设置很大的字体尺寸会扩展布局的宽度和高度，最后布局变得无法使用和阅读。但是，这种情况极少发生，因为很少有人会把字体放大3倍（特别是设计师已经使用了一个足够大的字体作为基准字体）。
像弹性布局一样，这种布局开始时最困难的一件事情就是计算合适的em值。为了简化从像素（px）到em的转化，可以设置body中10 px的字体基准尺寸为0.625 em或者62.5%（多数浏览器中字体的尺寸是16 px，10 px是16 px的62.5%），这样在计算字体的子元素的时候更容易些。例如，设置页面主体部分字体尺寸为0.625 em，那么一个960 px宽的DIV就是96 em。
这些元素的存在增加了弹性布局的复杂性，因为在字体的尺寸发生变化时，需要维护布局中所有元素的比例关系。在一些情况下，弹性布局允许所有元素随着字体的增加而变化，也就是说，图片也会因为用户设置的不同，跟着布局的变化放大或者缩小。
当然，这可以通过为图片赋予类似＜img width="80%" height="80%"/＞的百分比单位值来解决。但是记住，低分辨率的图片放大后会极大地降低质量。浏览器进行的是“模拟”放大，导致图片模糊并出现矩形块。另外，浏览器会从服务器加载整个（大）图片，并且进行缩放，增加了服务器的负载，提高了页面的加载时间。因此，多数设计师经常为图片使用绝对值。
关于弹性布局，或者基于字体尺寸设置宽度的布局，人们还非常关心如何展示多媒体内容，诸如图片和Flash对象。
看看下面的PHP 代码。
# include the class file
require_once('magazinelayout.class.php');
# Define the width for the output area (pixels)
$width = 600;
# Define padding around each image; this *must* be included
# in your style sheet (pixels)
$padding = 3;
# Define your template for outputting images
# (Don’t forget to escape the ＆)
$template ='＜img src="image.php?size=[size]＆file=[image]"
alt="Screenshot"/＞';
# create a new instance of the class
$mag = new magazinelayout($width,$padding,$template);
# Add the images in any order
$mag-＞add Image('landscape1.jpg');
$mag-＞add Image('portrait1.jpg');
$mag-＞add Image('landscape2.jpg');
# display the output
echo $mag-＞get Html();
可以预先定义整个杂志设计布局需要使用的宽度。因此，如果能够决定用户浏览器的宽度，就能够计算出图片布局应该有多宽。这当然不难实现，因为在第二个技术——自适应的流式布局中使用过。在这段代码中，使用了一个get Browser Width（）的函数。
如果能够使用这个方法获取到用户浏览器的宽度数值，就能根据这个数值找到内容区域应该设置的像素值（或者用来存放图片的区域的宽度）。假设希望放置图片的内容区设置为70%宽，那么只需要通过简单的数学运算，来得到浏览器宽的70%是多少像素（px）。
像素宽度=内容区的百分比×浏览器宽度。
$width=0.70×get Browser Width();
当然，这个计算很简单，也是流式布局中处理图片的简单方法。在PHP 脚本运行后，调整脚本来自动找到图片的像素宽度，这样就能方便地为流式布局中的图片或者其他固定宽度的元素设置宽度。
弹性布局的最大优点就是具备始终保持设计元素比例关系的能力以及确保可读性和定位准确。弹性布局是那些希望在流式布局和固定宽度布局之间妥协的设计师的首选。流式布局和固定宽度布局的优点在弹性布局中都有所体现。但是，这种布局实现起来非常困难，在完成之前需要进行大量的深入理解和测试。
现在，继续使用前面用过的HTML 结构来实现一个简单的两栏布局。如果1em 相当于16 px，那么960 px就是60 em。左边600 px是37.5 em，右侧360 px是22.5 em。为了方便使用，使用如下计算公式：
1 em÷16 px×（像素宽度）=em 单位
#container {
width: 60em;
}
width: 37.5em;
float: left;
display: inline;/* IE 5/6 Doubled Float-Margin Bug */
}
#right Col {
width: 22.5em;
float: right;
display: inline;/* IE 5/6 Doubled Float-Margin Bug */
}
#right Col {
width: 22.5em;
float: right;
display: inline;/* IE 5/6 Doubled Float-Margin Bug */
}
#footer {
width: 60em;
clear: both;
}
不同字体尺寸下的弹性布局截图显示，随着字体的增大，布局的宽度也会有相应的增加（图4.12）。
下一代浏览器，诸如Firefox3+、Opera 9.5+和 IE 7+都带来了一项似乎会减轻网站开发人员工作的特性——全页面缩放（Full Page Zoom）。
这种技术不仅是简单地增加网站中字体的尺寸，浏览器现在也支持用户自然缩放布局，包括布局中的图片和背景，整个页面设计都会根据选择进行等比例缩放。同时，所有的固定宽度布局也变成了“可变化的”。布局中始终包含内容的区域也支持这个特性。这样，就不会出现在上一代网络浏览器中经常出现的盒模型叠加的现象。直观地讲，这项技术将会导致弹性布局的荒废和消亡，因为他们达到了需要CSS 代码才能实现的同样的效果。
然而，事实并非如此。如果为用户提供一个带页面缩放的固定宽度布局，用户看到每行的字数会与设想的不一致（例如，一些用户因为视力的原因会选择大一点的字体）。
图4.12
在固定宽度布局的页面中，可变的字体尺寸使内容的显示变得难以预测，同时也很难保留设计中的比例和平衡。另外，当页面放大（或者缩小）时，某些情况下并不会放大Logo或者图标。换句话说，这种布局允许用户只缩放固定的区域或者元素，这在浏览器缩放中是无法实现的。当然，基于像素布局的所有缺点仍然存在，包括水平滚动条和过多的空白。最后，全页面缩放对满足不同用户需求有所帮助，但却不是开发人员的终极解决方案。