响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。响应式设计允许你在不同的平台上，创建独一无二的用户体验，与此同时，只要最少的维护工作。

已经有不少文章涉及响应式设计，这些文章帮助我们理解和解剖响应式网站设计的学习指南和教程，揭示媒体查询的作用，与此同时，还提供一些令人兴奋的响应式设计集合。

我们暂且先放开宏观上的响应式Web设计，把目光聚集在更具挑战性的“响应式导航菜单设计”上。桌面版提供了足够的屏幕空间来显示多层导航布局，然而，屏幕越小，清晰地显示同一个内容就越困难。这里提供了五大法则，让你无论在大屏幕还是小屏幕上都能轻松高效地设计响应式导航菜单。

一.按照优先级显示内容

也许，这是在屏幕小的设备上的最有效方法，根据用户来突显不同的内容。在什么样的情况下，用户会使用移动设备来访问网站？他们的访问目标是什么？我们需要提供什么样的内容来满足？下面我们例举两个例子， 根据内容优先级，在移动设备上简化网站导航。

1.只显示高优先级内容

在屏幕较小的移动设备上应该优先考虑内容并且去移掉那些小的栏目。

The Sweet Hat Club网站会为移动设备优化内容并且重构导航菜单，来代替水平显示所有栏目（item），移动版本的导航仅仅垂直显示几个高优先级的栏目，尽管Twitter和Facebook连接被移掉，但Join连接却被升级。它并不是一个普通的文本连接，而是一个引起人们注意的彩色按钮。

2.在顶部显示高优先级内容

 

把最重要的内容放置在顶部

Barack Obama网站把募捐和Obama选举作为网站焦点。电脑版的主页在顶部显示了3条内容，其中两条是关于参加竞选的新闻。而在移动版本上，整个空间都被募捐按钮所覆盖，其次才是人们所关注的其他内容。关于Obama和其竞选信息则被放置在页面最下面。

二.用创造力来处理有限的空间

这里有一个事实，移动设备的屏幕空间明显比桌面版的小很多。设计师面临的挑战是不管屏幕尺寸来重新布局并且找出所有相关内容。与此同时，设计应该让顾客在视觉上和感觉上保持一致，尽管是访问同一个网站。，

1.调整设计来适应可用空间

一个灵活的设计会让你在不同的设备上仍保持相同的视觉&感觉。

Oliver Russell网站最棒的工作是网站在不同的屏幕分辨率下保持相同的视觉和感觉。无论是头部还是导航菜单都能够轻松地重构，并且无需抛弃任何有用的资源。仅仅把不同的内容翻转90度，允许把彩色背景挤压的更加紧密。

2.适用于所有屏幕的一些设计

选择一个设计，可以轻松地调整。

Flip网站选择了一个非常简单智能的导航菜单。在所有设备上都保持干净的布局和清晰的颜色，在桌面版本上，不同的内容会有不同的颜色编码，这真是个非常聪明的做法，把简单的文本链接转变成按钮。在移动设备上，导航菜单也能非常完美的工作，因为颜色区域保证了不精确的手指范围。