本文由Spy根据Annarita Tranfici的系列教程《Understanding Responsive Web Design》之一《Responsive Web Design: Fluid Layouts》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sitepoint.com/responsive-web-design-fluid-layouts。

——作者：Annarita Tranfici

——译者：Spy

前两篇文章中关注响应式web设计的清晰概念和如何响应式地使用字体之后，让我们来深人研究一下流布局。在此文中，我将演示当下是真正需要流布局的，以及当你可以选择不一定是响应式的不同解决方案。让我们接下来学习一些特定技术与应用。

理解灵活的布局对你的项目很有帮助，理解和考虑到其他可行的解决方案是否是一种很好的选择。事实上，只有深入了解每种方案的优缺点，你才能有效地选择某种布局方案。

布局类型有4种：固定宽度布局，流体布局，弹性布局和混合布局，一起来逐个分析吧。

固定宽度布局

在固定布局中，网页的宽度是必须指定为一个像素值，一般设为960像素。在过去，开发人员发现960像素是最适合作为网格布局的宽度，因为960可以整除3，4，5，6，8，10，12和15。

尽管到了今天，在web开发中还是比较普遍使用固定宽度布局的，原因是这种布局提供很强的稳定性与可控性。如果你知道你的网页宽度，就可以兼容所有浏览器与设备，你可以精确地控制图像位置，就好像一切尽在掌控之中。

然而，固定宽度布局固然有些劣势，在前面的文章也提到，想创建一个固定宽度布局网站的开发人员必须意识到网站是否可以在各式各样的屏幕，浏览器和设备中可用与可见地显示出来。现在市场上出现如此众多设备，意味着有各式各样的屏幕尺寸，对开发人员提出了“一种尺寸适应所有”的技术挑战，这种挑战已超越了固定宽度设计的精确度和可控制性。

固定宽度的网站出错的一个常见例子就是小于960像素的屏幕尺寸是非常常见的。这样网站就不能够全屏显示了，你将看到一条水平的导航条。事实上,这些小屏幕通常用手指操作,而不是鼠标来控制。

即使当屏幕尺寸大于960像素，还是会出现其他的问题。例如，网页会被一大片无内容空白包围着，很明显，开发人员不会选择固定宽度布局应用在大屏幕尺寸上。开发人员和用户宁愿做出更多宽度版本来。

流体布局（自适应布局）

流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，通过设置了百分比，你将不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，你可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。

流布局与媒体查询和优化样式技术的关系密切。单纯的基于百分比宽度是不足以在一个大屏幕中实现你设计。稍后我们将学到如何得到一个完美的流布局。

弹性布局

弹性布局跟流布局很相像，主要不同是大小单位。弹性布局的大小单位不是像素或者百分比，而是em。

一个em单位等于定义在CSS规则：font-size的值大小。例如，我们设置文本的font-size大小为20像素，那么1em就等于20px，2em就等于40px，以此类推。

在CSS中像素px和em之间的转换计算是一门科学，并不像上面这说得这么简单。如果你想详细了解两者之间的转换，可以阅读早前的文章《CSS中强大的EM》。——@大漠

这种布局为开发人员提供了一种很强的排版控制。由于绝大多数的布局主要由文本来填充，此方案使弹性布局成为许多项目的强有力的竞争者。然而，还是存在缺点就是在某些例子中依然出现令人不愉快的水平滚动条。

混合布局

最后介绍这个混合布局，是上面介绍的两种或者更多布局类型的组合。例如，开发人员可能需要设置某些指定元素（侧栏或者底部）一个固定宽度，剩下的就选择百分比或者em。

明显地，这种途径还是有劣势——如果你是指侧栏的宽度为200像素，然后为剩下的内容设置为80%的宽度，当屏幕小于1000像素时，你将会看到一条水平滚动条，因为主要的列已经没有足够空间容纳了。现实中很少情况,在你的项目只会有一个元素。但是你可以很容易地解决这些问题,后面我们将会学习到。

总结

你可能想知道什么是最好的解决方案？上面列出的四种类型布局哪种才是最适合作为响应式解决方案。你或许已经猜到,每个布局类型都有其优点和缺点。这一切都取决于你的需求和项目的特点。

这或者很容易致使你认为，这些布局之一都是普遍比其他的优秀的，但不能认为它们之间是互斥关系或是竞争对手。相反地,应该考虑技术,可以结合使用。许多这些技术不可能独立于其他技术而存在的。例如，如果没有定义固定字体大小，em就是没有意义的。同样，如果没有精确宽度来适应流行的屏幕尺寸，媒体查询也将是无意义的。

我们将在下一篇文章在通过真实的应用来学习这些技术。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Spy

原名吴建杰，常用昵称“间谍”，现居广州。目前不断学习CSS3,HTML5等前沿技术，巩固js基础知识。在进行前端开发的过程中，追求HTML便签语义化，CSS的重用性，js封装等很多性能优化的操作，一切以用户体验为基础，不断地追求性能优化。希望与更多的同行朋友一起共勉：个人博客,新浪微博。

上一篇下一篇

如需转载，烦请注明出处：

英文原文：http://www.sitepoint.com/responsive-web-design-fluid-layouts

中文译文：http://www.w3cplus.com/responsive/responsive-web-design-fluid-layouts.html