Question

我设置了一个导航栏，随着屏幕尺寸变小，我的导航栏部分变得更加紧密，直到我最终显示它们：无。在这一点上，我有一个下拉菜单的按钮，取代了我的导航栏链接，但我不知道如何只在屏幕尺寸上显示最大宽度为600px或更少。它可以在我的导航栏链接旁边显示，也可以在隐藏后显示，或者根本不可见。 HELP。

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

    @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

正如我在评论中所述：ul唯一有效的孩子是li元素。因此，您的a和div在此处无效。

您应该始终用引号"包装内联属性除此之外，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下方。

＆＃13;

.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
  }
}

＆＃13;

<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>

＆＃13;

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

2 个答案: