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

我创建了一个网页，目前正试图让导航栏做出响应，我已经有了所有的媒体查询标签，但当我在开发工具上查看不同屏幕大小时，有时它看起来会完全符合我的要求，有时它看起来会出错

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

非常感谢您的帮助

常量导航幻灯片==>{ const burger=document.querySelector'.burger'； const nav=document.querySelector'.nav links'； const NavLinks=document.queryselectoral'.nav links li'； burger.addEventListener'click'，=>{ //切换导航 类列表。切换“nav-active”； //动画链接 NavLinks.forEachlink，索引{ 如果link.style.animation{ link.style.animation=； }否则{ link.style.animation=`NavLinkFade 0.5s轻松转发${index/7+3}s`； } }; //汉堡动画 burger.classList.toggle'toggle； }, } 导航幻灯片； 身体{ 保证金：0； 填充：0； 身高：100%； } /*导航顶栏*/ .导航{ 背景色：2b2929； 显示器：flex； 证明内容：周围的空间； 对齐项目：居中； 最小高度：8vh； 字体系列：Arial、Helvetica、无衬线字体； } .标志{ 颜色：白色； 文本转换：大写； 字母间距：5px； 字体大小：22px； } .导航链接{ 显示器：flex； 证明内容：周围的空间； 宽度：30件； } .nav链接李{ 列表样式：无； } .导航链接：悬停{ 颜色：RGB0204255； } .导航链接a{ 颜色：白色； 文字装饰：无； 字母间距：3px； 字体大小：粗体； 字体大小：14px； 文本转换：大写； } .汉堡{ 显示：无； 光标：指针； } .汉堡部{ 宽度：25px； 高度：3倍； 背景色：白色； 保证金：5px； 过渡：所有0.3秒缓解； } @媒体屏幕和最大宽度：1024px{ .导航链接{ 宽度：60%； } } @媒体屏幕和最大宽度：768px{ 身体{ 溢出x：隐藏； } .导航链接{ 位置：绝对位置； 右：0px； 高度：92vh； 顶部：6vh； 背景色：2b2929； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 宽度：50%； 转化：转化率100%； 过渡：0.5s轻松过渡； } .nav链接李{ 不透明度：100%； } .汉堡{ 显示：块； } .页脚{ 填充底部：100px； } } @媒体屏幕和最小宽度：768px{ 身体{ 溢出x：隐藏； } } .导航激活{ 转化：translateX0%； } @关键帧navlinkfade{ 从{ 不透明度：0； 转换：translateX50px } 到{ 不透明度：1； 转换：translateX0px； } } 苏·阿勒顿 苏·阿勒顿 让你的想象力尽情发挥吧

我在开发工具上查看它在不同屏幕大小下的外观，有时它会完全符合我的要求，有时它看起来会出错

您应该提到它在哪个屏幕大小上看起来不同，以及您希望它看起来到底是什么意思。另外，似乎没有定义链接，因为您正在集合上使用forEach，这是一个数组方法。可以先将集合转换为数组

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