也许现在设计师和开发人员面临的最大挑战就是把我们称之为“响应式布局”的设计狂潮理出个头绪。设计和制作在任何屏幕尺寸上都适用的网站，其难度之高简直相当于传说中英雄们所面对的挑战。因此，我真的十分希望在本节展示响应式设计的各种类型。针对响应式设计所收集的网页图片也是本书中最多的。如果能在这方面获得灵感，那将收获颇丰。仔细研究一下此处的范例，然后就会发现别人在建立作品集网站时，面临与你同样的问题时是如何解决的。

大多数响应式网站就像Michael Sevilla的作品集网站一样（图1），从大屏幕切换到小屏幕时，页面变化非常自然也比较明显。位于网格中的图片慢慢压缩，最终变成一列。导航栏也逐渐移动到了品牌标识图片的下方。这种效果给人的感觉十分自然，就好像屏幕压缩后，内容理应如此重新排列。同样的效果在Applove的网站上（图2）也能看到。在这里，原本一排排横向排列的内容随着屏幕的缩小，自然而然地逐渐排成一个竖列。我们经常会看到这种类型的处理方式，而且我也将此视为现代网页设计中最大的一种结构模式。

回想大约十年前，网页的基本结构还只有如下几部分：清晰的页眉用来放置徽标和导航，侧边栏用来放置子导航，一个明显的内容区域，用来结束页面的页脚。那时候最常见的设计就是把一些类似“容器”的结构组合成一个整体。这些容器框定了所有内容的显示位置，所有元素都放到了容器里面，容器就像口袋一样，把所有东西都装了进去。而现在，我们发现响应式设计基本已经宣告了传统设计方式的终结。以前那些华丽的容器和盛放内容的框框，对于现在这个响应式世界的设计风格而言，简直就是一场噩梦。我们看到，取而代之的是一栏栏内容纵向排列，效果也非常好。每一栏内容都可以按需自行调整，而且多个栏目可以彼此堆叠到一起。这样纵向上一栏一栏堆叠的方式已经成为当今内容结构排列的标准做法。在本节以及本书的案例中，这种排列方式会反复出现。