许多响应式网站在大屏幕上提供水平导航栏，并在较小的视口中提供下拉导航。 这是一种非常体面的方法，但并非没有问题。 首先，设备不只是大小而已。 它们有各种可以想象的尺寸。 其次，导航可能会随着时间而改变。 第三，布局或字体大小可能会因屏幕大小而异。 我们将以不同的方式做事...
为什么不检查（使用JavaScript）以查看实际上有多少导航空间适合可用空间？ 知道这一点后，我们就可以将导航栏中不适合的项目移到下拉菜单中。 在特别小的屏幕上，我们可以选择将整个菜单放入下拉菜单。
导航适合吗？
哪种导航效果最好？ 这个问题的答案取决于几个因素，包括屏幕大小，字体大小，字体系列，导航项的数量以及导航出现的上下文。 这些因素相互影响，并且都可以改变。
不用考虑所有这些因素，我们仅查看最终结果：所有导航项是否都排在一个整齐的行中，或者某些导航项被下推到下一行？ 如果是后者，那么可以容纳多少个物品？ 有了这些信息，我们可以为任务选择正确的导航。
步骤1：选择断点
响应式设计具有两个主要功能。 首先，设计必须流畅 ：其宽度与浏览器的宽度成比例。 其次，存在断点宽度，通过使用CSS媒体查询可以更改设计的宽度。 例如，您可能决定当浏览器的宽度不超过480像素时，侧栏将移动到内容下方，并且标题将变小。 您可以根据需要设置任意多个断点。
您可以使用媒体查询来创建断点，如下所示：
@media only screen and (max-width: 480px) {
/* This CSS will be applied only to phones and other small devices. */
}那么，我们如何选择断点？ 一种方法是选择一些与常见设备尺寸匹配的宽度。
Twitter Bootstrap具有多个断点 ，包括在不大于480像素的视口上触发的“智能电话”断点。 它还具有在768px和979px之间触发的“肖像平板电脑”断点。
您可能会注意到，Bootstrap中没有“ landscape tablet”断点。 这是因为iPad的横向宽度为1024像素-与许多台式机屏幕相同。 这给我们带来了这种方法的主要缺陷：涉及对设备类型进行有根据的猜测。 碰到我们的“纵向平板电脑”的设备实际上可能是一个很大的电话或一个很小的笔记本电脑。
媒体查询不会告诉我们正在使用哪种类型的设备，但是我们可以根据设备的大小做出有根据的猜测。
另一种方法是使断点基于设计和内容。 您可以在没有断点的情况下实现流畅的设计版本，然后以不同的宽度对其进行测试。 当您遇到宽度开始变得有些奇怪的宽度时，是考虑添加断点的好时机。 这就是Ethan Marcotte所钟爱的方法，他创造了“响应式设计”一词。
哪种方法最好？ 就像生活中的许多事情一样，这取决于。 您是否正在使用像Bootstrap这样的预构建框架？ 如果您可以谈论特定类型的设备，您认为向团队或客户解释自适应设计会更容易吗？ 如果您回答“是”，则根据设备大小选择断点可能更适合您。 如果您回答“否”，则根据设计和内容选择断点可能会给您带来更大的*度和灵活性。 这就是我们在本教程中将采用的方法。
步骤2：编写标记
让我们开始构建一个简单的页面。 我们将构建一个“文章”区域，其中包含一些内容和一个导航栏。 在文章旁边，我们将放在一边。
<article>
<nav>
<ul class="navbar" id="mainNavbar">
<li><a href="/">Home</a></li>
<li><a href="/products.html">Products</a></li>
<!-- More nav items... -->
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
<p>Here is our content.</p>
</article>
<aside>
<p>Here is a side note about our content.</p>
</aside>为了演示起见，在此列表中包括十个左右导航项。
步骤3：基本样式
首先，让我们设置列表样式以显示导航栏。
.navbar {
background-color: #055;
margin: 0;
padding: 0;
width: 100%;
line-height: 1;
overflow: hidden;
}
.navbar li, .navbar a {
display: inline-block;
}
.navbar li {
list-style-type: none;
}
.navbar > li {
margin-left: .25em;
}
.navbar > li:first-child {
margin-left: 0;
}
.navbar a {
padding: .25em;
text-decoration: none;
height: 1em;
font-weight: bold;
color: #fff;
}
.navbar a:hover {
background-color: #088;
}我们还将使我们的文章脱颖而出，并将其放在一边作为侧边栏。 我们使用宽度的百分比值来使设计流畅。
body {
font-family: sans-serif;
font-size: 16px;
background-color: #fff;
}
article {
background-color: #eee;
padding: 2.5%;
margin-right: 1%;
width: 64%;
float:left;
}
aside {
background-color: #ccc;
padding: 2.5%;
width: 25%;
float: left;
}我们的最终结果应如下所示：
步骤4：添加断点
当我们的宽度变得特别小时，文本会自动缠绕，以至于难以阅读。 我们可以通过以下方法解决此问题：使文章和一面都占据整个宽度，然后将一面向下推到文章下方。
@media only screen and (max-width: 550px) {
aside, article {
width: 95%;
float: none;
}
article {
margin-right: 0;
margin-bottom: 1em;
}
}随便玩一个窗口宽度，看看会发生什么。 通常，随着窗口变小，导航的空间越来越少。 但是，当您将窗口缩小到550px时，实际上您会获得一些用于导航的空间，因为旁边会下降到下一行。
我们可以在导航栏中显示的项目数取决于几个因素，包括窗口的宽度，断点，字体大小和导航中的项目数。
步骤5：在导航栏上设置固定高度
在许多情况下，我们的导航栏内容并不整齐。 让我们解决这个问题！
如果用户使用JavaScript，我们将隐藏不适合的项目。 稍后我们将在下拉菜单中显示它们。 如果用户没有JavaScript，我们只需要根据需要扩展导航栏的高度即可。 它虽然不漂亮，但至少具有功能性。
为此，我们将下载并包含一个自定义版本的Modernizr ，这是一个JavaScript库，允许我们在浏览器中测试功能支持。 我们针对JavaScript支持和触摸事件支持的自定义构建测试。
接下来，我们将在标签中添加一个“ no-js”类。 如果用户使用JavaScript，则Mozernizr将该类更改为“ js”。 如果用户没有JavaScript，则该类将重新显示“ no-js”。
<html class="no-js">
<script src="modernizr.custom.js"></script>注意：出于性能原因，通常最好避免将脚本放在页面顶部。 当浏览器忙于下载脚本时，它将停止下载其他文件并呈现页面。 在这种情况下，这实际上是我们想要的：在.js类到位之前，我们不希望浏览器显示任何内容。 与这种方法相关的性能影响较小，我们使用定制的Modernizr构建已有所缓解。 如果您只需要该“ no-js”类，并且不打算使用Modernizr的其他功能，则可以使用此单行奇迹来使页面更轻巧。
现在我们已经有了一个工作的.js类，让我们用它来隐藏所有换行的项目。
.js .navbar {
height: 1.5em;
overflow: hidden;
}第6步：添加FlexMenu
接下来，让我们下载flexMenu ，这是一个jQuery插件，可让我们检查所有项目是否都适合导航栏并显示适当的菜单类型。 我们还需要jQuery本身。 将这些脚本放在页面底部，以便它们在加载时不会阻止页面显示。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="flexmenu.min.js"></script>我们还需要告诉flexMenu查看菜单并根据需要调整其大小：
<script type="text/javascript">
$('#mainNavbar').flexMenu();
</script>现在，当我们调整页面大小时，当某些项目不适合导航栏时，将显示“更多”链接。 您可以将鼠标悬停或点击此链接以显示包含这些项目的下拉菜单。 如果页面太小而无法在导航栏中显示一个或两个以上的项目，则会显示一个“菜单”链接。 当您将鼠标悬停或点击此链接时，将显示所有导航项。
现在，我们有了所需的行为，但是下拉菜单看起来非常糟糕。 没关系-我们将在下一步中解决该问题。
步骤7：样式flexMenu
现在，让我们添加一些样式以使下拉菜单看起来更好。 我们还将在“菜单”或“更多”链接旁边添加CSS箭头，以明确表明这些链接将打开一个下拉菜单。
使用CSS箭头时 ，没有图像可加载，并且在高分辨率显示器上，箭头保持清晰。 这种方法适用于所有现代浏览器以及IE8。 如果需要支持IE7或更早版本，请确保包括基于图像的后备。
.flexMenu-popup {
padding: 0;
background-color: #088;
margin: 0;
}
.flexMenu-viewMore > a, .flexMenu-viewMore > a:hover {
background-color: #5599AA;
}
.flexMenu-viewMore > a:after {
display: inline-block;
content:"";
border-left:0.3em solid transparent;
border-right:0.3em solid transparent;
border-top:0.4em solid white;
margin-left:0.4em;
position: relative;
top: -.1em;
}
.flexMenu-viewMore.active > a, .flexMenu-viewMore.active > a:hover {
background-color: #088;
}
.flexMenu-popup > li > a, .flexMenu-popup > li {
display: block;
}
.flexMenu-popup > li > a:hover {
background-color: #3aa;
}第8步：调整触摸屏
现在，我们有了一个工具栏，可以在各种屏幕尺寸上很好地工作，但是在触摸屏上使用它有点困难。 触摸屏无法提供比鼠标和触控板更高的精度，因此很容易错过和点击错误的项目。 要解决此问题，让我们将链接稍大一些，并将它们分开一些。
我们之前添加的Modernizr为它检查的每个功能提供了一个CSS类。 在带有触摸屏的设备上，它将添加“触摸”类。 在没有触摸屏的设备上，它将添加“非触摸”类。
.touch .navbar {
font-size: 1.25em;
}
因为我们已经用ems表示了所有大小，所以我们可以通过其字体大小来放大或缩小整个导航栏。 上方的一行（好吧，大概是我们隔开的三种方式）不仅可以调整文本的大小，还可以调整箭头的大小，导航栏的高度，链接的填充以及项目之间的边距。
注意： .touch类指示对触摸事件的支持，这使开发人员可以将触摸输入构建到Web应用程序中。 同时具有触摸屏和鼠标的设备（例如Windows 8平板电脑）很可能会获得.touch类。 大多数触摸设备都是出于兼容性目的而模拟鼠标事件，因此当前无法使用Modernizr来检测具有触摸屏和鼠标的设备。
第9步：修复跨浏览器时髦
如果您到目前为止在IE7中演示了该示例，则可能会注意到两个问题：
- 调整窗口大小时，有时在我们到达断点之前，侧栏会被推到文章下方。
- 下拉菜单位于“更多”链接底部下方一个像素，因此，当您尝试将鼠标悬停在该菜单上时，该菜单就会消失。
第一个问题是由于IE7对百分比的处理。 如果计算得出的值包括一个像素的一小部分，则它总是四舍五入 。 第二个问题可能是由类似的问题引起的。
要变通解决此问题，我们可以在IE7中为页面设置固定宽度。 为此，我们首先在页面顶部添加“小于IE8”类。
<!--[if lt IE 8]> <html lang="en-us" class="no-js lt-ie8"> <![endif]-->
<!--[if gte IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->接下来，让我们添加一些CSS，这些CSS设置文章的特定像素宽度，并放在IE7中。 这些区域的总宽度加上填充，边距和舍入余量为901像素。
.lt-ie8 .flexMenu-popup {
margin-top: -1px
}
.lt-ie8 article {
width: 600px;
}
.lt-ie8 aside {
width: 200px;
}
.lt-ie8 body {
width: 901px;
}您可能还会注意到，在iOS上，将设备从纵向旋转到横向时，缩放级别会发生变化。 要解决此问题，只需获取此基于JavaScript的修复程序 ，然后在页面底部对其进行引用。 此问题显然已在iOS 6中修复 。
进一步阅读
Brad Frost的文章“ 响应式导航模式和响应式设计的复杂导航模式”涵盖了在响应式站点上进行导航的多种方法。
Luke Wroblewski还是响应式和移动设计模式的绝佳资源。 特别是，他的“ 关闭画布”方法非常聪明：它将导航和其他辅助内容置于屏幕之外的小型设备上。 当用户点击按钮时，内容从左侧或右侧滑入。
当然，这些资源并没有提供详尽的清单。 响应式设计仍然是一个新兴领域，您可以期望将来会出现许多新颖的设计模式。 也许其中一些会是你的！