jquery - 如何使用 jQuery 和 Modernizr 根据屏幕大小添加/删除菜单项？

Question

我在这里阅读了很多关于 Modernizr 的问题，这些问题涉及 Modernizr、jquery 和调整大小的超时。我和他们中的许多人一起玩过，他们倾向于做到这一点，所以当你调整大小时，菜单项会反复添加，一遍又一遍，直到你淹没在新的导航项目中。

如果屏幕尺寸发生变化，我只想添加然后从主导航中删除链接。当大小低于 768px 时添加它，然后当它是 768 及以上时将其删除。我怎样才能做到这一点？

Answer 1

为什么不尝试 CSS 媒体查询而不是 jQuery

确保将元标记放在头部

<meta name="viewport" content="width=device-width, initial-scale=1.0">



@media (min-width : 769px) {
  .main-nav .myLink {display:none;}
}

@media (max-width : 768px) {
  .main-nav .myLink {display:block;}
}