本节书摘来异步社区《响应式Web设计实践》一书中的第2章，第2.1节，作者： 【美】Tim Kadlec 译者： 侯鸿儒 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。

第2章　流动布局

响应式Web设计实践

——“橡树与芦苇”伊索寓言

在“橡树与芦苇”的故事中，大橡树和芦苇都被风吹来吹去，橡树想要一直站得又高又稳，并因此与大风做着顽强的抵抗，但最终它还是被大风给打败了。

与之相反，芦苇则弯下了腰，当然也不是它们想要这样，只是它们能弯得下腰。它们不与大风对着干，而是就让自己随风摇曳。虽然被大风吹得扭曲甚至彼此缠绕在一起，但毕竟它们最后还是活了下来。

长期以来，我们其实都是在按照橡树的思维方式来建立网站的，主要表现为设计中的一些硬性规定以及使用固定宽度。它们看起来好像很不错，直到它们不可避免地遇到了我们无法预知的Web。现在的我们需要去拥抱Web，而不是与无法预知的Web也来场对抗。

这也是John Allsopp在2000年为A List Apart写的“A Dao of Web Design”（Web设计之道）中所极力指出的。在这个今天还是最佳实践，而明天就有可能成为笑柄的业界，Allsopp的见解后来被证明是难得的先见之明——他认为Web社区需要拥抱Web的灵活性，同时不要再将Web的不可控性视为是一种限制：

“我相信，Web最伟大的优点常常被人们视为是限制和缺陷。灵活性是Web固有的本性，作为设计师和开发者的我们，应该去拥抱它的这一特性，并且要设计开发出同样具有灵活性的页面，使得所有的设备都可以访问。”

Allsopp认识到Web的灵活性和不可预测性不应该是我们与之斗争的对象，因为这些都是Web的特性，而不是它的漏洞。也正是由于这些特性才使得Web如此独特，以至于成为了比印刷品还要强大的媒介。

随着越来越多设备的涌现，人们越来越难以继续忽略Web所固有的灵活性和不可预测性。终于在12年之后，业界才终于赶上了Allsopp那篇文章中提出的新思潮。而作为拥抱灵活性的第一步，就是要为我们的站点创建流动布局，并藉此来对不同尺寸的设备屏幕作出不同的响应。

在本章中你将会学到：

四种不同的布局类型；

• 指定字体大小的几种不同方法，以及如何从中作出选择；
• 如何创建流动布局；
• 如何将固定宽度的资源（比如图片）与流动布局很好地结合起来；
• 如何利用display:table来结合使用固定宽度和流动宽度。