Responsive design 我如何利用ZURB基金会网格来制作菜单栏？

使用网格布局，我们可以轻松编写HTML（小-中-大）以在不同设备上以不同方式显示信息表

然而，对于菜单栏，有时需要完全不同的布局。因此HTML必须编写两次，一次用于web，一次用于移动设备。我们将根据设备显示/隐藏

---

我的问题是：这个展示/隐藏被认为是对响应性设计的一种攻击吗？有更好的方法吗？

Zurb内置了响应菜单，但是如果您想要两个完全不同的菜单，有时最好复制一些代码，并在适当的时候隐藏/显示它们

---

这不是最干净的解决方案，但肯定在任何地方都会发生。你只需要决定什么时候取舍对你来说是正确的。

如果你能找到一种方法来创建html，只需使用CSS就可以轻松地将其重新设置为移动菜单的样式，这是最干净的方法。通常，所有移动菜单都需要某种切换/按钮来部署，因此您至少要将JavaScript或jQuery添加到组合中

隐藏和显示内容（也可以通过媒体查询）并不是真正的黑客行为，但在原型制作时是一种更快的工作方式

例如，在原型制作时，我经常使用基础顶条，然后创建具有基本基础组件的自定义菜单，然后使用不具有jQuery依赖性且重量轻得多的移动菜单来创建。相比之下，许多网站使用顶栏和offcanvas元素，与仅使用网格、按钮、下拉列表等相比，它们在CSS和JS中都非常重要

---

正如Ryan所说，这是一种权衡。你必须决定干净的语义标记对你和你的项目有多重要，并决定是否值得为此付出额外的时间和精力，以获得与最终用户大致相同的体验。

对于我现在正在开发的AngularJS应用程序，我最近尝试使用Foundation 5的Interchange根据窗口宽度交换部分内容。不幸的是，它只起了部分作用。Angular做事的方式有些问题。我不打算深入细节，但因为这不起作用，我寻找了不同的解决方案，如

如果你使用Angular，这些都是你问题的解决方案，这可能是增加Angular武库的一个好办法。考虑新推出的是基础，但针对Web应用程序创建者。它基于Angular和ui路由器

---

如果你只是在做一个简单的网站（产品、公文包、博客），那么如果你真的想为手机和桌面菜单栏（导航栏）使用不同的html布局，那么使用它似乎是最优雅的解决方案

经常使用互通作为基于媒体查询的伪部分，对于非JS组件来说是可以的，但是我不确定JS基础组件在放置在外部文件中时是否正确运行并以这种方式加载。此外，加载外部文件会带来额外的性能损失，而不是通过CSS/媒体查询进行内联解释。因此，在网站或应用程序中将导航条编码到

index.html

，而不是作为部分视图调用，这是更好的性能明智选择。除非应用程序状态发生变化并且必须显示新的nav UI，否则这是有意义的。嗯，但现在我开始重新考虑根据状态隐藏和显示（通过CSS）新/旧UI元素的想法。隐马尔可夫模型。