当您低于 450px 时，使侧边栏消失

Question

我正在制作一个网站，我希望我的侧边栏在我低于 450 像素时消失，因为这样所有其他内容在 phone 上都会变大。我如何使用媒体查询来做到这一点？

@media (max-width: 450px){

   


}

<div class="sidebar">
  <div class="sticky-sidebar">
    <a href="index.html"> <img class="logo" src="sweat.png" alt="logo"> </a>
    <ul class="sidebar-ul">
      <li class="sidebar-li"><a class="sidebar-a" href="proteinpulver.html">Proteinpulver <i class="fas fa-angle-right"></i></a></li>
      <li class="sidebar-li"><a class="sidebar-a" href="fatburner.html">Fatburners <i class="fas fa-angle-right"></i></a></li>
      <li class="sidebar-li"><a class="sidebar-a" href="gainers.html">Gainers <i class="fas fa-angle-right"></i></a></li>
      <li class="sidebar-li"><a class="sidebar-a" href="aminosyror.html">Aminosyror <i class="fas fa-angle-right"></i></a></li>
      <li class="sidebar-li"><a class="sidebar-a" href="utrustning.html">Utrustinig för träning hemma <i class="fas fa-angle-right"></i></a></li>
      <li class="sidebar-li"><a class="sidebar-a" href="mineraler.html">Mineraler för att orka <i class="fas fa-angle-right"></i></a></li>
    </ul>
    <ul class="quote-ul">
      <li class="quote-li"> <span class="red"> get </span> up </li>
      <li class="quote-li"> take <span class="red"> action </span>  </li>
      <li class="quote-li">  <span class="red"> take </span> over </li>
    </ul>
  </div>
</div>

Answer 1

这应该可以解决问题：

@media screen and (max-width: 450px) {
  .sidebar {
    display: none;
  }
}

<div class="sidebar">
  <div class="sticky-sidebar">
     <a href="index.html"> <img class="logo" src="sweat.png" alt="logo"> </a>
      <ul class="sidebar-ul">
          <li class="sidebar-li"><a class="sidebar-a" href="proteinpulver.html">Proteinpulver <i class="fas fa-angle-right"></i></a></li>
          <li class="sidebar-li"><a class="sidebar-a" href="fatburner.html">Fatburners <i class="fas fa-angle-right"></i></a></li>
          <li class="sidebar-li"><a class="sidebar-a" href="gainers.html">Gainers <i class="fas fa-angle-right"></i></a></li>
          <li class="sidebar-li"><a class="sidebar-a" href="aminosyror.html">Aminosyror <i class="fas fa-angle-right"></i></a></li>
          <li class="sidebar-li"><a class="sidebar-a" href="utrustning.html">Utrustinig för träning hemma <i class="fas fa-angle-right"></i></a></li>
          <li class="sidebar-li"><a class="sidebar-a" href="mineraler.html">Mineraler för att orka <i class="fas fa-angle-right"></i></a></li>
      </ul>
      <ul class="quote-ul">
          <li class="quote-li"> <span class="red"> get </span> up </li>
          <li class="quote-li"> take <span class="red"> action </span>  </li>
          <li class="quote-li">  <span class="red"> take </span> over </li>
      </ul>
  </div>
</div>

Answer 2

@media (max-width: 450px){

   .sidebar{
   display: none;


}

<div class="sidebar">
                <div class="sticky-sidebar">
                   <a href="index.html"> <img class="logo" src="sweat.png" alt="logo"> </a>
                    <ul class="sidebar-ul">
                        <li class="sidebar-li"><a class="sidebar-a" href="proteinpulver.html">Proteinpulver <i class="fas fa-angle-right"></i></a></li>
                        <li class="sidebar-li"><a class="sidebar-a" href="fatburner.html">Fatburners <i class="fas fa-angle-right"></i></a></li>
                        <li class="sidebar-li"><a class="sidebar-a" href="gainers.html">Gainers <i class="fas fa-angle-right"></i></a></li>
                        <li class="sidebar-li"><a class="sidebar-a" href="aminosyror.html">Aminosyror <i class="fas fa-angle-right"></i></a></li>
                        <li class="sidebar-li"><a class="sidebar-a" href="utrustning.html">Utrustinig för träning hemma <i class="fas fa-angle-right"></i></a></li>
                        <li class="sidebar-li"><a class="sidebar-a" href="mineraler.html">Mineraler för att orka <i class="fas fa-angle-right"></i></a></li>
                    </ul>
                    <ul class="quote-ul">
                        <li class="quote-li"> <span class="red"> get </span> up </li>
                        <li class="quote-li"> take <span class="red"> action </span>  </li>
                        <li class="quote-li">  <span class="red"> take </span> over </li>
                    </ul>
                </div>
            </div>

当您低于 450px 时，使侧边栏消失

Make a sidebar disappear when you go under 450px

html

css

media-queries

responsive-design