设计知识！响应式导航有哪几类设计方式？

只在页脚放置导航和页脚锚点类似，只是它不在页眉放置锚点。这种模式的理念是内容优先、导航其次。 这种方式需要用户将页面滑动至底部才能看见导航

优点： 容易实现 兼容性（无需 JavaScript） CSS 改动小：由于采用了绝对或固定位置，将底部导航移到大屏幕的顶部简直太容易了

缺点： 难以发现：无论在大屏或小屏上都很难发现页脚会有导航； 难以使用：移动端用户需要不断滚动页面至底部，才能使用页脚导航，十分不便

相关案例： Pears Fray

彻底隐藏

将导航隐藏，得到最大化的空间。

这种设计模式遵循了该法则：不要惩罚那些通过移动端访问你网站的用户。 移动端用户到底想得到或不想要哪些信息仍旧是个谜。移动端用户会做任何桌面端用户都会做的事情，因此，仅针对移动端用户提供某些核心功能是很有必要的。

优点： 屌爆了（原文 Sexy as hell 求大神信达雅的翻译）

完美的利用有限的屏幕空间

对于移动端设备有很大优势，只用向下滑动就能查看更多。

缺点： 去掉了针对移动端用户的核心功能或内容 将链接或内容隐藏的做法并不好。响应式的鼓吹者认为这种做法会导致移动端页面与桌面端形成内容上的差异，以及体验上的灾难。

增加页面额外的开销 使用命令 display: none 仅能在页面上隐藏该元素。页面的代码、图片或别的文件依旧在后台下载，这最终导致了页面访问缓慢。

难以维护 两个完全分离的导航体系将成为后期维护时的负担。

可能存在迷惑 移动端用户向下滑动页面来刷新列表时，并不会意识到 当我（作者）第一次看到 Facebook 采用这种设计时，我还以为页面出错了呢！在屏幕右侧露出一些信息对于我本人而言还是很奇怪的（纯属作者个人看法）

结语

移动导航就像你真正的朋友一样：彼此需要，但又给彼此空间；而那些假装跟你很要好的朋友总是在你需要的时候消失（当你需要导航的时候找不到）或者占据你的个人空间而让你抓狂（比如：擦，从我床上滚下去）；因此，针对响应式导航进行设计，需要在访问的便携性和空间上做一个平衡。