>我有一个我启动的网页，目前只是想让导航栏响应，我已经包含了所有的媒体查询标签，但是当我在开发人员工具上查看它在不同屏幕尺寸下的外观时，有时它会完全按照我想要的样子，有时它会看起来不对。
我没有更改代码中的任何内容，但是当我浏览不同的屏幕选项时，它只会在两者之间切换，我不确定为什么，所以我不知道代码是错误的还是只是开发人员工具调整？
任何帮助将不胜感激。
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>我正在开发人员工具上查看它在不同屏幕尺寸下的外观，有时它会完全按照我想要的样子，有时它会看起来不对。
您应该提及它在哪个屏幕尺寸上看起来不同，以及您希望它看起来如何。此外，似乎没有定义link，因为您正在集合上使用forEach，这是一个 Array 方法。您可以先将集合转换为数组
const NavLinksArray = Array.prototype.slice.call(NavLinks)