移动/桌面的不同菜单

Question

所以我正在使用 Bootstrap 并为台式机/平板电脑和移动设备处理不同的菜单。我有一个用于桌面/平板电脑的常规顶部固定导航栏，其中一些选项卡是带有多列的下拉菜单，因此将其用于移动设备是不合逻辑的，所以我正在为此做一个滑动推送菜单。谁能指出我如何有效地做到这一点的大方向？我知道如何自己实现菜单，这只是为了方便它们各自的设备显示。我是否需要为各个菜单使用媒体查询和 display:none，或者可能是 JS if 语句？后者是否会导致移动版本的网站加载速度变慢到无法实现的程度，因为其他菜单很广泛？

我搜索了 SE，并找到了答案，但它仅适用于 WP，因此并没有真正帮助，但它使用了 if 语句。感谢您的帮助！

Answer 1

如果您使用的是 Bootstrap，您可以使用一些类来根据屏幕的宽度告诉某个部分是否隐藏。

这些类是hidden-xs、hidden-sm等等。

请参阅引导文档： http://getbootstrap.com/css/#responsive-utilities

Answer 2

将display : none 与媒体查询一起使用就可以完成这项工作，并且不会在移动版本中造成任何问题。