选择固定布局（fiexd），流动布局（fluid/liquid）还是弹性布局（elastic）？这个问题已经困扰了网页设计师们很多年了。每种布局都有它的优点和缺点。最后的选择往往取决于需求，而不是哪个更简单。考虑到这些因素并恰当的设计，你最终能获得拥有所有优点的成功布局。
本篇文章将讨论每个布局类型的优点和缺点。只要牢记可用性，无论适用哪种布局类型都可以做出成功的站点。
参考我们之前的文章：
Flexible Layouts： Challenge For The Future，未来布局的挑战
Applying Divine PRoportion To Your Web Designs，如何在布局中应用”黄金比例”和“三分定律“。
归根结底网页最重要的是可用性，这一点很难平衡，因为站点用户情况可能不同。
当开始一个大众化的站点时，设计者应该考虑到访问者可能的不同点：
屏幕分辨率
浏览器
浏览器是否在最大最小（占屏幕面积）状态
浏览器开启额外工具栏（历史记录，书签等）
操作系统和硬件设备
如果没有标准化站点尺寸，设计师在开始工作的时候会遇到许多问题。
一、 固定和流动布局的不同点
虽然大多数设计者和开发人员认为固定和流动布局的定义很基础，但为了更为清晰，再复习一遍。
固定宽度布局（Fixed Layout）
这种布局有一个设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。重要的是容器（外包裹）元素是设置为不能移动的。无论访问者屏幕的分辨率是多少，网页都显示为和其它访问者相同的宽度。
上图展示的是一个固定宽度布局的基本轮廓。里面的三列分别是520，200和200px宽度。960px已经成为现代web设计的标准，因为大多数站点用户被假定为使用1024×768分略率。
流动/流体布局（Fluid/Liquid Layout）
流体布局，也被成为流体布局，主体部分都是用了百分比宽度，因此可以自适应用户的分辨率。
上图是一个简单流动（流体）布局的轮廓。虽然有些设计师可能给流动布局中某些元素设置了固定宽度，比如margin，只要主体元素是百分比宽度，就可以让布局自适应适应各种分辨率。
二、固定宽度页面设计
许多设计者喜欢固定宽度布局胜过流动布局，因为它更容易实现，并确保了设计者所见即用户所见。不过它和流动布局一样，具有两面性。
优点
固定宽度布局更容易使用，在设计方面更容易定制。
在所有浏览器中宽度一样，所以不会受到图片、表单、视频和其他固定宽度内容的麻烦。
不需要min-width和max-width，所有浏览器都支持。
即使需要兼容800×600这么小的分辨率，网页的主体内容仍然有足够的宽度易于阅读。
缺点
对于使用高分辨率的用户，固定宽度布局会留下很大的空白。因此出现了“黄金比例”，“三分定律”，综合平衡和其他设计原则。
屏幕分辨率过小时需要垂直滚动条。
无缝纹理，连续的图案需要适应更大的分辨率。
固定宽度布局一般在可用性上得分较低。
固定宽度布局的例子
5个充分发挥固定宽度布局的例子。这些站点吸纳了多种设计元素。设计师控制了内容区域周围附加元素的定位，并精确地设置了内容和导航的宽度。
注意上面所有的例子，设计师使用了连续图片保证了在大分辨率下正常显示。
三、避开固定宽度设计的弊端
如果你决定使用固定页面设计，你应该知道避开这种布局弊端的技巧，创作出成功的设计。
分辨率统计
现在大多数设计师假定互联网用户的分辨率为1024×768或更高。以统计来自W3Schools。
640×480在图表中没有占据任何位置。W3School的分析认为0%的用户使用这种分辨率，但实际上，一些用户使用了这个分辨率，但它的占有率太小，这个统计的显示设计者可以完全忽略这个分辨率，一样可以提供广泛的可用性。
即便是使用过640×480分辨率的用户，它们或许只是偶尔在便携式设备上浏览过，没有使用平时的主设备。
下面的表格来自SohTanaka.com，这个博客简单的研究比较了2006-2008年一些大站点适应的屏幕分辨率。
这四个站点在3年的时间里完成了从800×600到1024×768的转变。
960px还是740px？
大多数设计者选择960或760px的固定宽度。960px最适合1024×768或者更高的分辨率，有一点空间设置margin。如果设计者想让布局适应800×600分辨率的用户，可以使用760px的宽度，它仍然适用于更大的分辨率。
总是居中布局
当使用固定宽度布局时，应该确保至少居中外包裹DIV以保持一种平衡（margin:0 auto）。否则，对于使用大分辨率的用户，整个页面会被藏到一边去。
四、流动布局页面设计
设计师也许有各种理由不使用流动布局设计，但这种布局的优点是不能被忽视的。
优点
流动布局页面对用户更友好，因为它能自适应用户的设置。
页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。
如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条。
缺点
设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的。
图片，视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户。
在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读。
流动布局页面例子
五、使用流动宽度页面设计
虽然流动布局表现出一些问题，但是可以使用一些技巧克服它们。
使用简单的设计
流动站点设计越少依赖图片和困难的技术，就越容易被制作和维护。它将能够兼容各种分辨率。使用更为简洁的代码和设计，可以更好的防止、发现和解决兼容性问题。
例如Smashing Magazine使用了流动页面布局，为了更简单，只让顶部的黑橘色导航可以延伸，自适应用户的分辨率。另外内容区域按照需要延伸和收缩，智能地使用CSS防止sidebar和内容产生冲突。
Min-width和Max-width
为了让流动布局在屏幕分辨率很大或者很小时有固定宽度，可以使用min-width和max-width，让页面具有可用性。在小分辨率下，页面可能可能固定宽度布局一样产生水平滚动条。W3School对min-width和max-width的详细定义：
W3Schools’ page on the max-width CSS property
W3Schools’ page on the min-width CSS property
IE 6无法支持min-width和max-width。可以使用CSS表达式解决。
六、弹性设计
这是web页面设计的第三种选择，因为能和其他两种主要布局类型（固定宽度和流动）结合使用，弹性设计受到设计师的欢迎。弹性布局使用em作为单位。下面的引用阐述了什么是em和为什么用它有益。
“1px是电脑显示屏上一个无法度量的一个点，而1em是和元素本身的字体一致。em是相对单位，随用户字体大小变化而改变。”
-Patrick Griffiths， A List Apart
虽然弹性设计是为了提供更多好处，但它也像上面两种布局类型有两面性。
优点
应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。
对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到。
缺点
正是因为第一个优点，这种布局会产生一个巨大的可用性问题。需要花更多时间理解和测试，让布局适合所有用户。
这种布局类型相对于其他两个更难制作，它能带来的一点儿可用性提升看起来并不值得。
根据布局的具体情况，一些弹性设计需要专门为IE 6追加一些样式。
弹性页面设计例子
弹性布局和流动布局在表现上十分相似，经常让人困惑。不过弹性设计使用em而不是百分比作为单位，只要依赖于字体大小。这些设计自适应用户浏览器文本大小。
七、哪种适合你的站点？
在定宽和流动布局之前选择主要取决于站点自身的类型。在决定之前权衡它们的两面性，找出适合你站点的方案。
比如目录类型的站点最好选择定宽布局，以便你能够更好的控制设计。你将不但能控制设计中独立的布局元素，还能更好的使用定宽控制目录列表中的图片。不只是目录站点，许多设计师更喜欢定宽布局为了易于使用和更有保证。
追求100%兼容性的设计师应该花点时间建立流动布局。在这种布局下，主要的问题不是在大分辨率下页面两边多余的空白，而是在少数使用小分辨率的用户。对于大访问量的站点来说，适应甚至是最小分辨率的用户或许也很重要。不过大访问量的站点设计简洁，可以有效地使用流动布局。
仍然不能决定？那么弹性布局或者部分弹性的布局也是一个选择。只要使用恰当，弹性布局会同时拥有上面两种布局的优点。设计师将经常使用弹性布局的原则，字体和容器大小使用em，然后巧妙地混合使用百分比和像素设置余下的布局元素。
新闻热点
疑难解答
