宽度 - 最大范围之后隐藏汉堡菜单图像的最简单方法是：480px使用媒体查询？

Question

<nav class="navbar">

        <ul>
          <li><a href="index.html">HOME</a></li>
          <li><a href="#">CASINO</a></li>
          <li><a href="#">HOTEL</a></li>
          <li><a href="#">ENTERTAINMENT</a></li>
          <li><a href="#">EVENTS</a></li>
          <li><a href="#">MEMBERS</a></li>
          <li><a href="#">JOIN</a></li>
        </ul>

      </nav>

      <img class="burger-nav" src="./images/burger-nav.png" />

/* .burger-nav{
  position: absolute;
  left: 95%;
  top: 16px;
} */

当我评论上述CSS时，即使我以后将其添加到我的媒体查询中，也不会出现汉堡映像。

我甚至设置了包含图像的主体类“ .burger-nav”，以显示以后将其添加到我的媒体查询中。

.burger-nav{
  display: none;
}

这是我的媒体查询。

@media screen and (max-width: 480px){
  .burger-nav{
    display: block;
    position: absolute;
    left: 95%;
    top: 16px;
  }
}

我如何才能在视口宽度为480px或更小时时才能出现汉堡菜单图像。

这工程！您是否要摆脱复选框？如果是这样，请在断点后尝试：

/* Getting rid of the checkbox's view */
nav input[type='checkbox'], nav label {
  display: none;
}

我目前正在开发我的ePortfoli；我注意到复选框的断点比我为@Media查询所做的要大（MAX WIDTH 320）；而且效果很好。我仍在开发网站以进行移动响应能力；因此，您将能够看到我在某些断点中应用该代码的位置的区别，而不是在其他断点中应用它来隐藏用于汉堡菜单的复选框（这证明了代码有效！）。您可以查看我的网站并使用Google Chrome开发人员工具：

Https：//scn.ninja/

我甚至在我的存储库中证明了这一点：

Answer 1