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

Question

现在，我的 Web 应用程序上有一个适合桌面屏幕的格式不错的菜单。但是，在较小的屏幕尺寸上，菜单确实无法正确显示。此时我想知道我是否可以像这样添加一个汉堡菜单 --->

http://codepen.io/ettrics/pen/JoaaxW

    <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 像素时，这会将 display: none 添加到您的 div。您还可以使用 max-width: 600px 添加最大 600 像素宽的 CSS 规则。

在这里阅读更多:https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries