如何解决此自适应导航错误？

Michael C. 发表于 Dev

迈克尔·C

我正在努力使响应式导航正常工作，但我遇到了一个让我很烦的错误，我只想知道什么是最好，最干净的解决方法。您可以在CodePen上实时查看

我设置的是居中导航和中间的徽标，徽标周围有空白，所有这些都在媒体查询中

/* Desktop specific nav
 =====================================================*/
  @media (min-width: 45em) {
 }

当我使用媒体查询来显示我的移动导航时，问题就来了（我试图做的是摆脱空白，因此它将以块显示）。如果您打算在更改为移动设备时重新调整浏览器的大小，就会看到该错误（您会注意到底部的某个位置的“联系人”，并且页边距被弄乱了，我试图完全摆脱它，因此从台式机直接移动到移动设备，没有任何小故障）

  /* Mobile nav
 =====================================================*/

  @media (max-width: 44.99999999em) {
 }

我完整的标记

<header class="main"> 
      <nav class="nav-collapse" >


       <a href="#about" class="main_link first">ABOUT</a>
       <a href="#skills" class="main_link">PORTFOLIO</a>
       <a href="#" class="sprite-main_logo sprite">LOGO</a>
       <a href="#section_about " class="main_link">BLOG</a>
       <a href="#contact" class="main_link last">CONTACT</a>


      </nav> 

</header>

的CSS

   @media (min-width: 45.0000em) {

      header a.main_link {
      display: inline-block;
      width: 80px;
      margin-right: 40px;
      margin-left: 40px;
      vertical-align: bottom;
      font-size: 18px;
      line-height: 1.278;
      font-size: 1.125rem;
      text-decoration: none;
      color: #000;
      font-family: 'PT Sans Narrow', sans-serif;
     }

      header.main>div {
      background: #ffffff;
      padding: 30px 0px 40px 0px;
      box-shadow: 0 2px 0 2px rgba(242, 242, 242, 0.75);
    }

      header.main {
      text-align: center;
    }

      header a.sprite-main_logo {
      display: inline-block;
      vertical-align: bottom;
      margin: 0px 89px;
    }


      header a.main_link.last {
      margin-right: 0;
    }

      header a.main_link.first {
      margin-left: 0;
    }


}

  @media (max-width: 44.99999999em) {

   .nav-collapse,
   .nav-collapse * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    .nav-collapse,
    .nav-collapse  {
        list-style: none;
        width: 100%;
        float: left;
        position: relative;
        margin-bottom: 10px;
        display: block;


        }

    .nav-collapse a {
        float: left;
        width: 100%;
        border-bottom: 1px solid #f4f4f4;
        margin-bottom: 5px;
        padding-bottom: 10px;
        padding-top: 10px;

            }

    .nav-collapse a:last-child {
        border-bottom: none;
    }

    .nav-collapse a:nth-child(3) {
        display: none;
    }

    .nav-collapse a {
        color: #444;
        text-decoration: none;
        width: 100%;
        background: #ffffff;
        padding-left: 10px;
    }