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

【问题标题】：Css only or jquery - how to hide navbar on mobile devices - what am I doing wrong?仅 Css 或 jquery - 如何在移动设备上隐藏导航栏 - 我做错了什么？
【发布时间】：2017-11-16 22:25:35
【问题描述】：

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

1) css 仅使用 display:none 用于较小的设备

  @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();
     }
});

查看 jsfiddle（使用 jquery）：https://jsfiddle.net/codingcodingcoding/913j87bb/

没有任何作用。如果有人知道原因，请告诉我。

【问题讨论】：

这是因为你写错了代码。 :) 告诉我们一件事。我们如何在不查看您的代码的情况下判断问题所在？
发布您的代码，然后我们可以帮助修复它。不要指望我们只是为你写出来。
我在添加代码之前不小心点击了发布我的任务 - 无需降级我的问题。 jsfiddle 马上就要来了。
您没有正确使用媒体查询。请参阅here 并记住 PC 浏览器和移动设备之间存在差异。
Media Queries: How to target desktop, tablet and mobile?的可能重复

标签： css media-queries

【解决方案1】：

如果您添加到您的 jsfiddle（在 css 窗口中）：

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

它有效。通过减少结果窗口来检查它。你不需要 jquery。

希望对你有帮助。

【讨论】：

谢谢。我在 codepen 上尝试它，然后使用 chrome 开发人员工具检查它是否工作并且它从未工作，但是当我简单地调整窗口大小时，我可以看到它工作
如果对您有帮助并且您认为答案正确，请检查答案是否正确，谢谢。