Question

我启动了一个网页，目前只是想让导航栏响应，我已经插入了所有媒体查询标签，但是当我在开发人员工具上查看它在不同屏幕尺寸下的外观时，，有时它看起来确实像我想要的样子，而有时它看起来却是错误的。

我没有更改代码中的任何内容，但是当我浏览不同的屏幕选项时，它只会在它们之间切换，而且我不确定为什么，所以我不知道代码是错误的还是仅仅是开发人员工具调整？

任何帮助将不胜感激。

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const NavLinks = document.querySelectorAll('.nav-links li');


  burger.addEventListener('click', () => {
    //toggle Nav
    nav.classList.toggle('nav-active');


    //Animate Links
    NavLinks.forEach(link, index); {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `NavLinkFade 0.5s ease forwards ${index / 7 + 3}s`;
      }
    };

    //burger animation
    burger.classList.toggle('toggle');

  }, )
}

navSlide();

body {
  margin: 0;
  padding: 0;
  height: 100%;
}


/*navigation top bar*/

.nav {
  background-color: #2b2929;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: Arial, Helvetica, sans-serif;
}

.logo {
  color: white;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 22px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 30pc;
}

.nav-links li {
  list-style: none;
}

.nav-links :hover {
  color: rgb(0, 204, 255);
}

.nav-links a {
  color: white;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px;
  transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
  .nav-links {
    width: 60%;
  }
}

@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 6vh;
    background-color: #2b2929;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 100%;
  }
  .burger {
    display: block;
  }
  .footer {
    padding-bottom: 100px;
  }
}

@media screen and (min-width:768px) {
  body {
    overflow-x: hidden;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navlinkfade {
  from {
    opacity: 0;
    transform: translateX(50px)
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Sue Allerton</title>
  <link rel="stylesheet" href="styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
  <nav class="nav">

    <h1 class="logo">Sue Allerton</h1>

    <ul class="nav-links">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About Me</a></li>
      <li><a href="collections.html">Collections</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>

    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>

    </div>
  </nav>
  <section class="container">
    <div class="main">
      <p>let your imagination run wild</p>
    </div>
  </section>

  <footer class="footer">

    <div class="social">
      <ul>
        <li><a href="https://www.facebook.com/sueallerton2/">Facebook</a></li>
        <li><a href="https://www.instagram.com/author_sue95/">Instagram</a></li>
        <li><a href="https://www.goodreads.com/author/show/16440673.Sue_Allerton">Goodreads</a></li>
      </ul>

    </div>

  </footer>




  <script src="app.js"></script>


</body>

</html>

Answer 1

我正在开发人员工具上查看它在不同屏幕尺寸下的显示方式，有时它看起来确实像我想要的样子，有时它看起来是错误的。

您应该提及它在哪个屏幕尺寸上看起来有所不同，以及您想要的外观看起来是什么意思。而且似乎link尚未定义，因为您正在集合上使用forEach，这是一个Array方法。您可以先将集合转换为数组

const NavLinksArray = Array.prototype.slice.call(NavLinks)

更改开发人员工具上的响应式外观时，网页外观有所不同

1 个答案: