响应式导航菜单调整大小？答案

【问题标题】：Responsive Navigation Menu Resize?响应式导航菜单调整大小？
【发布时间】：2013-06-24 21:42:44
【问题描述】：

我正在尝试构建一个非常简单的响应式导航菜单。这里有一些问题。

我在这里创建了一个 CodePen：http://codepen.io/anon/pen/fHsti

非常感谢您的帮助！

【问题讨论】：

【解决方案1】：

老实说，解决这个问题的最好方法是只使用 JS 来管理媒体查询之间的导航状态，其他所有内容都应该隐藏在媒体查询中。 MediaCheck 或 matchMedia 之类的东西是将媒体查询和 JS 联系在一起的好方法。

我created a simple demo 使用了你的标记，我想我得到了你正在寻找的功能。我使用 mediaCheck 清除了 768px 主断点之间的任何 JS 强加的内联样式。

【讨论】：

这实际上效果很好。您能再向我解释一下 MediaCheck 和 matchMedia 之间的区别吗？我查看了 github 上的文档，但至少可以说很少。谢谢！
matchMedia.js 是 matchMedia browser API 的 polyfill。 mediaCheck 是 matchMedia 的包装器（API，我知道令人困惑），并为不支持 matchMedia 的浏览器提供后备。

【解决方案2】：

更改此代码。您需要在事件处理程序中使用if 语句，否则只有在加载时窗口的宽度小于 768 像素时才会绑定事件。

jQuery("nav p.active").on("click", function(){
  if (jQuery(window).width() <= 768) {
    jQuery("nav ul").toggle("fast");
  }
});

【讨论】：