现代响应式网站设计的一些经典案例

华盛顿邮报

响应式设计面临的巨大挑战之一就是占用内容丰富的网站并使其在较小的屏幕上运行。“华盛顿邮报”在充分利用屏幕房地产方面做得非常出色。

虽然桌面版本利用了多列网格，但平板电脑（人像）和手机版本可以很好地应对压缩内容的挑战。小屏幕上的死简单滑出式标题导航因其易用性而受到赞扬。这种体验针对移动设备进

99U

99U是Adobe的创意专业人士在线杂志。喜欢这个网站的一个方面是它在任何屏幕尺寸上的布局都非常简单。

使用浅色背景和大型黑色排版使得从桌面到移动设备都易于阅读。一个独特的功能是，在移动设备上，网站的页脚实际上隐藏在汉堡菜单中。这个小技巧可以节省一些空间并保留它以保持对内容的关注。

VOX

Vox是一个新闻网站，采用移动导航的不同路线。

标准文本导航栏不再是无处不在的汉堡菜单，而是随着屏幕变小而缩小。但是，不是试图在一个小空间中挤压几个项目，而是逐渐从菜单中删除类别，并将其隐藏在名为“更多”的下拉菜单中。

Etsy的

也许没有人比Etsy更好地为他们的观众设计。狡猾的市场也做出了正确的响应。移动亮点中的标题是以极其清晰简洁的方式为您提供所有基础知识（徽标，销售链接，登录和购物车图标）。

他们的分类商店部分从多列照片卡转换为干净的垂直图标菜单。这是工作中渐进式增强的一个很好的例子。

肯德基

肯德基是一个很好的鸡肉供应商，在他们的网站上做了一些出色的工作。

用户体验在不同设备和屏幕尺寸之间非常一致。在所有视口上同时使用汉堡菜单和水平滚动意味着用户将确切知道该做什么 – 无论他们用什么来浏览网站。

本田

作为众多产品的制造商，本田拥有多个产品线和用户可能感兴趣的品牌。他们在每个交替横幅中使用颜色使得找到你想要的东西变得非常简单（在平板电脑和手机上看起来特别酷）。

同样，这是一个在不同视口上带来非常相似体验的网站。

The National

独立摇滚乐国家大都会充分利用屏幕房地产。实际上，他们的网格式新闻和信息布局横跨高清屏幕的整个宽度。

这种类型的布局非常适合在页面宽度上全力以赴。较小的屏幕被视为类似的氛围，新闻项目并排列出并且仍然足够容易阅读。该网站提醒您，响应式设计还包括利用更高的屏幕分辨率，而不仅仅是确保所有内容都适合较小的分辨率。

响应革命

看看我们上面提到的网站，它们都不是特别具有革命性的。但每个人都有自己有趣的技术和理念，以确定响应式设计应该如何工作（更不用说要达到目标时需要克服的许多挑战）。它们可能不是革命性的，但它们肯定是革命的一部分。