《响应式Web设计实践》一第2章　流动布局

本节书摘来异步社区《响应式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来结合使用固定宽度和流动宽度。
下一代响应式Web设计：组件驱动式Web设计 自从著名设计师 Ethan Marcotte（@beep）在 A List Apart上发表了一篇名为《 Responsive Web Design》的文章之后，响应式网页设计（RWD，即 Responsive Web Design）的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特
响应式Web设计的9项基本原则 响应式web设计对于解决多类型屏幕问题来说是个不错方案，但从印刷的角度来看，其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸，没有任何物理限制，让人感到无从下手。随着建立网站可用的各种小工具越来越多，像素设计局限于桌面和移动端也已经成为历史。因此，现在就让我们来说明一下如何运用响应式web设计的各项基本原则来实现，而不是抗拒流畅的网页体验。为了简单起见，我们将着重讲布局（当然，响应式设计远远不止于此，如果你想进一步学习，可以点击此处）。
浅谈响应式Web设计与实现思路 响应式是什么呢？顾名思义，响应式，肯定会自动响应，响应什么？应用程序是在终端屏幕窗口中展示给用户，被用户访问的，那么就是响应屏幕的变化，不同终端屏幕尺寸大小不一致，需要针对不同尺寸屏幕进行不同的展示响应。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。