当浏览流式布局的网站时，内容区可能变得太宽而降低了可读性。为了提高可读性，设计师尝试通过CSS 的属性来限制布局的最大宽度。弹性布局（或者称为可缩放）布局采用了完全不同的方法来实现相同的效果。这种布局的基本思想是根据用户的字体大小而不是浏览器视口大小来调整网页布局的宽度。像素是计算机屏幕上无法缩放的一个点，em 则是字体的一个方形单位。根据用户对于字体尺寸的选择，em 单位经常发生变化（Elastic Design, alistapart.com）。相应的，设计师使用em 单位，一种与弗雷元素尺寸相关的相对单位来表示字体的大小。通过为布局中的区块和字体使用em 单位，设计师能够实现网页布局的整体缩放，保持内容区每行的宽度适中，实现接近现实的缩放效果。最后，当用户增加字体尺寸时，布局自动缩放，就像它们是一个有弹性的物体一样。

由于不依赖于浏览器视口的变化，弹性布局有点类似于固定宽度布局，同时具备了它的优点和缺点。设置很大的字体尺寸会扩展布局的宽度和高度，最后布局变得无法使用和阅读。但是，这种情况极少发生，因为很少有人会把字体放大3 倍（特别是设计师已经使用了一个足够大的字体作为基准字体）。

像弹性布局一样，这种布局开始时最困难的一件事情就是计算合适的em 值。为了简化从像素（px）到em 的转化，可以设置body 中10 像素的字体基准尺寸为0.625em 或者62.5%（多数浏览器中字体的尺寸是16 像素[注释]，10 像素是16

像素的62.5%），这样在计算字体的子元素的时候更容易些。例如，设置页面主体部分字体尺寸为0.625em，那么一个960 像素宽的DIV 就是96em。

这些元素的存在增加了弹性布局的复杂性，因为在字体的尺寸发生变化时，需要维护布局中所有元素的比例关系。在一些情况下，弹性布局允许所有元素随着字体的增加而变化，也就是说，图片也会因为用户设置的不同，跟着布局的变化放大或者缩小。

当然，这可以通过为图片赋予类似＜img width=“80%” height=“80%” /＞ 的百分比单位值来解决。但是记住，低分辨率的图片放大后会极大地降低质量。浏览器进行的是“模拟”放大，导致图片模糊并出现矩形块。另外，浏览器会从服务器加载整个（大）图片，并且进行缩放，增加了服务器的负载，提高了页面的加载时间。因此，多数设计师经常为图片使用绝对值。

关于弹性布局，或者基于字体尺寸设置宽度的布局，人们还非常关心如何展示多媒体内容，诸如图片和Flash对象。

在Harvey Kane 的“Automatic Magazine Layout”（alistapart.com）一文中提到的另外一个解决方案需要用到一些数学和PHP。文章标题取决于杂志中图片是如何被显示的：永远完美的布局和组织。看看下面的PHP 代码。

我们可以预先定义整个杂志设计布局需要使用的宽度。因此，如果能够决定用户浏览器的宽度，我们就能够计算出图片布局应该有多宽。这当然不难实现，因为在我们的第二个技术：自适应的流式布局中使用过。在这段代码中，Kevin Hale 使用了一个getBrowserWidth（）的函数。感兴趣的读者可以看看他的文章，增加对这个方法的理解。

如果能够使用这个方法获取到用户浏览器的宽度数值，我们就能根据这个数值找到内容区域应该设置的像素值（或者用来存放图片的区域的宽度）。假设我们希望放置图片的内容区设置为70% 宽。我们只需要通过简单的数学运算，来得到浏览器宽的70% 是多少像素（px）。

像素宽度= 内容区的百分比× 浏览器宽度。

运行后，调整脚本来自动找到图片的像素宽度，这样就方便地为流式布局中的图片或者其他固定宽度的元素设置宽度。

弹性布局的最大优点就是具备始终保持设计元素比例关系的能力，以及确保可读性和定位准确。弹性布局是那些希望在流式布局和固定宽度布局之间妥协的设计师的首选。流式布局和固定宽度布局的优点在弹性布局中都有所体现。但是，这种布局实现起来非常困难，在完成之前需要大量的深入理解和测试。

现在， 我们继续使用前面用过的HTML 结构来实现一个简单的两栏布局。如果1em 相当于16 像素，那么960 像素就是60em。左边600 像素是37.5em，右侧360 像素是22.5em。为了方便使用，下面是计算公式：1em÷16 像素×（像素宽度）=em 单位。

设计社区中在热烈地讨论灵活布局的生命力。下一代浏览器，诸如Firefox3+、Opera 9.5 + 和 IE 7+ 都带来了一项似乎会减轻网站开发人员工作的特性—全页面缩放（Full page zoom）。

不仅是简单地增加网站中字体的尺寸，浏览器现在支持用户自然地缩放布局，包括布局中的图片和背景。整个页面设计都会根据选择进行等比例缩放。同时，所有的固定宽度布局也变成了“可变化的”。布局中始终包含内容的区域也支持这个特性。这样，就不会出现在上一代网络浏览器中经常出现的盒模型叠加的现象。直观地讲，这项技术将会导致弹性布局的荒废和消亡，因为他们达到了需要C

SS 代码才能实现的同样的效果。

然而，事实并非如此。正如Zoe Mickley Gillenwater 所指出的（“为什么浏览器不能杀死弹性布局”，zomigi.com）。如果为用户提供一个带页面缩放的固定宽度布局，用户看到每行的字数会与设想的不一致（例如，一些用户因为视力的原因会选择大一点的字体）。

在固定宽度布局的页面中，可变的字体尺寸使内容的显示变得难以预测，同时也很难保留设计中的比例和平衡。另外，当页面放大（或者缩小）时，某些情况下并不会放大Logo 或者图标。换句话说，这种布局允许用户只缩放固定的区域或者元素，这在浏览器缩放中是无法实现的。当然，基于像素布局的所有缺点仍然存在，包括水平滚动条和过多的空白。最后，全页面缩放对满足不同用户需求有所帮助，但却不是青岛网站开发人员的终极解决方案。