仅Css或jquery-如何在移动设备上隐藏导航栏-我做错了什么？

我只想在比ipad大的设备上显示导航栏，在较小的设备上显示不同样式的导航栏。我试过了

1仅使用显示的css：小型设备无

  @media (max-width: 768px) {
    nav {
      display:none;
    }
  }

2仅使用可见性的css：隐藏/可见性：可见

    @media (min-width: 768px) {
    nav
    {
        visibility:visible;
    }
}

@media (max-width: 768px) {
    nav
    {
        visibility:hidden;
    }
}

3.使用jquery

$(window).on("orientationchange load resize", function () {
     var width = $(document).width();
     if(width<765){
       $("#navbar").hide();
     }
     else if(width>765){
              $("#navbar").show();
     }
});

请参阅JSFIDLE with jquery：

---

什么都不管用。如果有人知道原因，请告诉我。

如果您在css窗口添加到JSFIDLE：

@media (max-width: 768px) {
  nav {
    display:none;
  }
}

它起作用了。通过缩小结果窗口进行检查。这不需要jquery

---

希望有帮助。

这是因为您编写了错误的代码：告诉我们一件事。我们如何在看不到您的代码的情况下判断错误？发布您的代码，然后我们可以帮助修复它。别指望我们会为你写出来。在添加代码之前，我无意中点击了发布我的任务——不需要降低我的问题等级。JSFIDLE马上就来。您没有正确使用媒体查询。请参阅并记住，PC浏览器和移动设备之间存在差异。可能重复感谢。我在codepen上试用过它，然后使用chrome开发者工具检查它是否工作，但当我简单地调整窗口大小时，我可以看到它工作了。请检查答案是否正确，如果它帮助您，并且您发现它是正确的，谢谢。