使用媒体查询，是否隐藏 div 直到屏幕尺寸足够小？

Question

我设置了一个导航栏，随着屏幕尺寸变小，我的导航栏部分越来越靠近，直到最终我让它们显示：无。此时我有一个下拉菜单按钮，它代替了我的导航栏链接，但我无法弄清楚如何让它只显示在最大宽度为 600 像素或更小的屏幕尺寸上。它要么在我的导航栏链接旁边可见，要么在它们被隐藏后可见，或者根本不可见。帮助。

这是我对此部分的媒体查询

    @media (max-width:600px) {
    #main-pic{margin: 0 0 0 -220px;}
    #welcomesign{margin: 0 0 0 -40px;}
    #navprojects{display:none;}
    #navcontact{display:none}
    #navartwork{display:none}
    #navresume{display:none;}
    #navhome{display:none;}
    #3bd{visibility:visible}
    }

这里是html

    <ul>    
      <a id="nav1" class="eight" href=index.html><img id="sgmainlogo"                         src="sgproject4.png" alt=SGproject style=55px;width:55px;position:absolute;left:10px;top:4px;></a>
     <li id="navhome"><a id="nav" class="ten" href=home.html>Home</a></li>
     <li id="navresume"><a id="nav" class="ten" href=resume.html>Resume</a></li>
     <li id="navprojects"><a id="nav" class="ten" href=projects.html>Projects</a></li>
     <li id="navartwork"><a id="nav" class="ten" href=artwork.html>Artwork</a></li>
     <li id="navcontact"><a id="nav" class="ten" href=contact.html>Contact</a></li>

     <div id="3bd" class="dropdown" style="visibility:hidden;">
      <button onclick="myFunction()" class="dropbtn fa fa-bars"></button>
       <div id="myDropdown" class="dropdown-content">
        <a class="six" href="home.html">Home</a>
        <a class="six" href="resume.html">Resume</a>
        <a class="six" href="projects.html">Projects</a>
        <a class="six" href="artwork.html">Artwork</a>
        <a class="six" href="contact.html">Contact</a>
       </div>
     </div>
    </ul>

Answer 1

正如我的 cmets 中所述：ul 的唯一有效子元素是 li 元素。所以你的a 和div 在这里是无效的html。

您应该始终将内联属性用引号 " 括起来 除此之外，ID 在整个文档中必须是唯一的，您多次使用#nav。

您的媒体查询不起作用的问题可能是您的 ID 3bd 以数字开头。仅当使用 HTML5 文档类型和覆盖您的 css 样式的内联样式

时才允许这样做

试试这个： 我修复了 html 问题并将内联样式提取到媒体查询之外的 css。

#id_3bd {
  visibility: hidden;
}

@media (max-width:600px) {
  #main-pic {
    margin: 0 0 0 -220px;
  }
  #welcomesign {
    margin: 0 0 0 -40px;
  }
  #navprojects {
    display: none;
  }
  #navcontact {
    display: none;
  }
  #navartwork {
    display: none;
  }
  #navresume {
    display: none;
  }
  #navhome {
    display: none;
  }
  #id_3bd {
    visibility: visible;
  }
}

<ul>
  <li>
    <a id="nav1" class="eight" href="index.html"><img id="sgmainlogo" src="sgproject4.png" alt="SGproject" style="height:55px;width:55px;position:absolute;left:10px;top:4px;"></a>
  </li>
  <li id="navhome"><a id="nav2" class="ten" href="home.html">Home</a></li>
  <li id="navresume"><a id="nav3" class="ten" href="resume.html">Resume</a></li>
  <li id="navprojects"><a id="nav4" class="ten" href="projects.html">Projects</a></li>
  <li id="navartwork"><a id="nav5" class="ten" href="artwork.html">Artwork</a></li>
  <li id="navcontact"><a id="nav6" class="ten" href="contact.html">Contact</a></li>
  <li>
    <div id="id_3bd" class="dropdown">
      <button onclick="myFunction()" class="dropbtn fa fa-bars"></button>
      <div id="myDropdown" class="dropdown-content">
        <a class="six" href="home.html">Home</a>
        <a class="six" href="resume.html">Resume</a>
        <a class="six" href="projects.html">Projects</a>
        <a class="six" href="artwork.html">Artwork</a>
        <a class="six" href="contact.html">Contact</a>
      </div>
    </div>
  </li>

</ul>

Answer 2

不要在应用媒体查询的地方使用内联 css，并将媒体查询放在默认 css 下方。

.dropdown {
  visibility: hidden;
}

@media (max-width:600px) {
  #main-pic {
    margin: 0 0 0 -220px;
  }
  #welcomesign {
    margin: 0 0 0 -40px;
  }
  #navprojects {
    display: none;
  }
  #navcontact {
    display: none
  }
  #navartwork {
    display: none
  }
  #navresume {
    display: none;
  }
  #navhome {
    display: none;
  }
  .dropdown {
    visibility: visible
  }
}

<ul>
  <a id="nav1" class="eight" href=index.html><img id="sgmainlogo" src="sgproject4.png" alt=SGproject style=55px;width:55px;position:absolute;left:10px;top:4px;></a>
  <li id="navhome"><a id="nav" class="ten" href=home.html>Home</a></li>
  <li id="navresume"><a id="nav" class="ten" href=resume.html>Resume</a></li>
  <li id="navprojects"><a id="nav" class="ten" href=projects.html>Projects</a></li>
  <li id="navartwork"><a id="nav" class="ten" href=artwork.html>Artwork</a></li>
  <li id="navcontact"><a id="nav" class="ten" href=contact.html>Contact</a></li>

  <div id="3bd" class="dropdown">
    <button onclick="myFunction()" class="dropbtn fa fa-bars"></button>
    <div id="myDropdown" class="dropdown-content">
      <a class="six" href="home.html">Home</a>
      <a class="six" href="resume.html">Resume</a>
      <a class="six" href="projects.html">Projects</a>
      <a class="six" href="artwork.html">Artwork</a>
      <a class="six" href="contact.html">Contact</a>
    </div>
  </div>
</ul>