2.4.2 响应式网页设计

Ethan Marcotte 在 A List Apart 发表了一篇开创性的文章，将3种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。

真正的响应式设计方法不是根据视口大小改变网页布局，恰恰相反，它是从整体上颠覆我们当前设计网页的方法。从前我们针对计算机进行固定宽度设计，然后将其缩小并针对小屏幕进行内容重排；而现在，我们采用的方式是先针对小屏幕进行设计，进而逐步增强针对大屏幕的设计与内容。

图2.4-3所示为某品牌生鲜网站的界面设计。尽管这个色调现在看起来灰蒙蒙的，网格式风格的网页看起来有点单调无趣，但是，因为其高档的布局，这个网页在发布时还是引起了一定程度的热议。

图2.4-3 某品牌生鲜网站的界面设计

再如图 2.4-4 所示，Stephen Caver是一个一流的响应式网站。其包括一个巨大印刷字体的欢迎消息、网站顶部一个巨大的区域放置菜单、博客的规则布局。

图2.4-4 Stephen Caver响应式网站

每个网站都包含这3个基本方面，但这个网站的设计师给了我们一个对于网格式标记和博文根据设备的屏幕尺寸排版的正确示例。

图2.4-5 Illy Issimo网站设计

如图2.4-5所示，响应式设计对于高质量促销网站来说是一个重要功能，能够使网站更受消费者青睐。IIIy Issimo就很巧妙地运用了这个特点，打造出一个灵活的界面：为客户提供舒适的体验效果、扩大受众面、吸引使用其他设备的潜在用户。因此，网页上方放置了一个醒目的广告图。