第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来结合使用固定宽度和流动宽度。