(html) 在移动设备上查看我的网站时如何隐藏我的导航栏？答案

【问题标题】：(html) How do I hide my navbar when my website is viewed on mobile?(html) 在移动设备上查看我的网站时如何隐藏我的导航栏？
【发布时间】：2020-05-17 20:34:34
【问题描述】：

有没有办法用 html 和 css 做到这一点，或者我只能用 javascript/bootstrap 做到这一点？我对编码很陌生，如果可能的话，详细的解释会很好！

【问题讨论】：

标签： html css mobile navbar

【解决方案1】：

您可以使用 CSS 媒体查询来做到这一点。如果你是初学者，这里有一个关于 CSS media query 的小教程。

您可以根据移动设备大小隐藏导航栏。

示例：

@media only screen and (max-width: 600px) {
  .navbar{
      display:none;
  }
}

【讨论】：

【解决方案2】：

您可以在@media screen 的帮助下隐藏显示以显示或隐藏不同设备尺寸的代码。

例子：

@media screen and (max-width: 767px) {
  .hide_on_mobile {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .hide_on_mobile {
    display: block;
  }
}

【讨论】：

【解决方案3】：

是的，你可以。

有几种方法可以做到这一点

检测设备是可触摸的（例如，使用 Modernizr 之类的工具） - 我不推荐，因为现在笔记本电脑配备了触摸屏。
按设备的视口 - 这是最好的table list，Adobe 提供最流行的设备视口

我更喜欢第二种方法

所以解决方案就在CSS media-queries

阅读mobile first技术

示例（运行 sn-p 后按 Full page 按钮查看它在桌面中的外观）

<style>
  #navbar {
    display: none;
  }

  @media (min-width: 640px) {
    #navbar {
      background: lightblue;
      height: 60px;
    }
  }

  main {
    background: #ccc;
    min-height: 40vh;
  }
</style>

<div id="navbar"></div>
<main></main>

【讨论】：