现实中，设计师通常混合使用固定宽度、流式布局或者弹性布局元素，为用户提供每种方式的优点，并且将缺点降低到最小。

例如，内容区域通常会使用em 单位（以此来确保每行的适当长度以及在IE6 下的字体缩放）。侧边栏通常使用固定单位（因为侧边栏通常会包含固定宽度的Ba

nner，这样固定宽度才比较可行）。另外一个相关的技术是为流式内容指定“最小宽度”和“最大宽度”属性。使用CSS 属性而不是弹性元素，让用户可以根据个人喜好调整每行的长度。

Jello-liquid 布局虽然不是很流行，但却比较有趣（“Jello ：A Different LiquidLayout”，uwmike.com）。为了保持内容区的可读性，他努力降低布局增长时比例增长的速度。所以，一个自适应布局在1024×768（960÷1024=0.9375）视口中具有960 像素宽度，在窗口增长到1440×900（1440÷1350=0.9375）时会得到一个比1350 像素小的宽度。为了实现这种效果，布局中很大一部分元素都使用了固定的像素值，剩下的元素使用了与窗口宽度相关的相对值。

固定部分占布局的比例越小，布局随着窗口拉伸时所获得效果就越好。很简单、也很智能。

另外一个有趣的方法是结合了流式和弹性元素的流式弹性布局（fluid elasticlayout）。这种布局基于em 单位，但是使用相对值设置了“最小宽度”和“最大宽度”（考虑了窗口的宽度，赋予用户将布局限制在一定缩放范围内的能力）。通过设置最大和最小宽度，文本缩放到一定程度的时候会停止变化。布局随着窗口的变化而自动调整保留了适应性，同时也是弹性的。在窗口尺寸或者字体尺寸发生变化时，各列的宽度在自动变化。

在下面的例子中，为容器和每一列设置了“max-width”属性。这样布局就会限制在整个视口的宽度。同样，在较老版本的IE 中并不支持“max-width”，所

以我们需要为IE 做一些特殊的处理，代码如下所示（在下一个例子中将不再列出）。2.7 哪种布局最适合您的网站？

固定宽度的方法通常在带有大量图片的高级视觉布局中表现良好（例如娱乐、促销或者基于Flash 的网站，还有一些作品集页面），这样图片能够通过精确的定位实现更加准确、较少错误的设计。实现这种布局，设计师需要考虑用户的平均情况，确保设计的布局对大部分用户不会显得太窄或者太宽，在不同浏览器间保持良好的可用性。编写固定布局同样比较规则和直接，开发人员不需要为各种元素之间的关系和平衡耗费太多心思。

对于哪种布局最合适不会得到标准答案。限于使用环境、时间限制以及设计师的技能，每种布局都有特定的应用情况。

如果这正是你的想法，也许你会考虑在设计中使用流式布局。这种布局制作非常耗时，也不是很容易开发，并且在一些不可预知的环境中存在一定风险，但是提供了用户根据喜好调整布局的特性。流式布局具有较高的生产成本，但是显著降低了维护成本，同时为灵活性和跨分辨率的网站提供坚实的基础。设计师只需要确认内容区具有合适的行宽，并且在必要的情况下使用“minwidth”和“Max-width”。

是否仍然犹豫不决？弹性或者部分弹性的设计是另外一个选择。在正确使用的前提下，弹性布局在带来了更多可预测性的同时保持了布局的灵活性。因为弹性布

局依赖于字体大小（而不是浏览器的窗口尺寸），弹性布局允许设计师“冻结”布局中区块间的比例，确保元素之间的平衡和良好的可读性。特别是在文本较多的网站中，保持良好的可读性的要求非常严格（固定布局中也一样重要）。弹性布局更多的是用在杂志、在线商店、博客或者类似的网站上。聪明的流式网格使用者可以创建既忠实于原始设计比例和经典图片设计原则，又保持适应性的布局。

一些设计师希望在不同浏览器之间获得完美的一致，流式设计的支持者们却认为布局并不需要在不同平台和分辨率下保持一致。

实际工作中，设计师经常为字体和容器使用em 单位，而其他元素则灵活地使用像素和相对值来建立一个弹性的布局。这些或者相似的混合布局在实际情况中最常见，反映了设计师希望为每种情况找到最佳解决方案的努力。

在总结之前，有必要提一下智能手机、上网本和游戏终端，这些设备现在都可以进行网页浏览，所以更低（或者更高）的分辨率变得越来越重要，而且应当进行认真考虑。对于这类平台，动态的分辨率切换技术将会非常有用，而且在将来扩展你的布局类型时会是不二的选择。虽然构建自适应性的布局需要耗费很多时间，但是由于能够处理或小或大的各种类型的分辨率，会帮助设计师为用户呈现最合适的效果。随着屏幕宽度的不断增加，使用所有这些技巧只是个时间问题。