Question

现在我在我的网络应用程序上为桌面屏幕格式化了一个不错的菜单。但是，在较小的屏幕尺寸上，菜单确实无法正确显示。在这一点上，我想知道我是否可以添加这样的汉堡包菜单---＆gt;

    <header class="header">
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>

  <nav class="menu">
    <div class="menu__brand">
      <a href=""><div class="logo"></div></a>
    </div>
    <ul class="menu__list">
      <li class="menu__item"><a href="" class="menu__link">Work</a></li>
      <li class="menu__item"><a href="" class="menu__link">About</a></li>
      <li class="menu__item">
        <a href="https://twitter.com/ettrics" target="_blank" class="menu__link menu__link--social"><i class="fa fa-twitter"></i></a>
      </li>
      <li class="menu__item">
        <a href="https://dribbble.com/ettrics" target="_blank" class="menu__link menu__link--social">
          <i class="fa fa-dribbble"></i></a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <h1><a href="http://ettrics.com" target="_blank">Ettrics</a></h1>
  <h2>A Full-Screen Menu, showcasing your brand and website navigation.</h2>
  <p class="support">With support for IE10 & latest versions of Chrome, Safari, and Firefox.</p>
</main>

但只能在手机上显示平板电脑尺寸。基本上我要问的是有没有办法添加这个菜单并将其隐藏在桌面大小的屏幕上。

Answer 1

这是媒体查询的来源

@media (min-width: 600px) {
   .your-div {
      display: none;
   }
}

当浏览器宽度超过600像素时，这会向您的div添加display: none。您还可以使用max-width: 600px添加最大宽度为600像素的CSS规则。

在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

是 - 为此，您将使用媒体查询。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

在这种情况下，带有媒体查询的CSS看起来像

.burger {
  display: none;
}
.menu {
  display: block;
}

@media screen and (max-width: 960px) {
  .burger {
    display: block;
  }
  .menu {
    display: none;
  }
}

这告诉浏览器当视口宽度为960px（从0到960之间的任何宽度）时，显示汉堡，隐藏菜单。

单击.burger时，您还需要一些jQuery或纯JavaScript来切换.menu的显示：

$('.burger').click( function() {
  $('.menu').toggle();
});

这是一个CodePen，用于显示其工作原理（调整演示区域的大小，直到＆＃34; Burger＆＃34;出现）：http://codepen.io/Ronamo/pen/LZWzVJ

Answer 3

事实上，您可以使用媒体查询调整菜单：

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Bootstrap有一个可以帮助你的导航栏模板（菜单有响应）：https://getbootstrap.com/examples/navbar/

但是，如果你想要一个侧边栏，这可能会更好：http://startbootstrap.com/template-overviews/simple-sidebar/

如何添加仅显示在移动屏幕尺寸上的菜单？

3 个答案: