Javascript 媒体查询在798px上不工作，但在1786px上工作？

好吧，我有一个看起来很简单的问题。我有一个媒体查询，将导航从burger更改为768px中的扩展版本。但是它不起作用

如中所示：当其小于768px时，应应用burger nav，然后相应扩展。

不管发生了什么事，我想这是一个我似乎抓不住的小错误

/*单击导航*/
//主菜单下拉菜单（移动）
$（“.dropdown toggle”）。单击（函数（）{
$（this.parent（）.find（“.sub-menu:first”）.toggleClass（“toggle on”）；
});
/*悬停导航*/
//子菜单下拉列表
$（“.main导航ul li.菜单项有子项”）.hover（函数（）{
$（this.find（“.sub-menu:first”）.toggleClass（“toggleon”）；
});
$（“.primary toggle”）。单击（函数（）{
$（“.main-navigation-ul:first”）.toggleClass（“toggle-on”）；
});
//$（“.main navigation li.菜单项有子项”）.mouseleave（函数（）{
//$（“.sub-menu”）.removeClass（“打开切换”）；
// });
/*
#标题
*/
*,
html{
保证金：0；
字体大小：36px；
}
.网站标题{
背景色：黑色；
填充：1rem；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
/*汉堡包导航样式*/
#边栏btn{
垂直对齐：中间对齐；
宽度：40px；
高度：25px；
光标：指针；
利润率：10px；
位置：相对位置；
顶部：4px；
}
#边栏btn跨度{
高度：2倍；
背景：黑色；
边缘底部：5px；
显示：块；
}
#边栏btn跨度：第n个子项（2）{
宽度：75%；
}
#边栏btn跨度：第n个子项（3）{
宽度：50%；
}
/*主菜单*/
.主导航{
填充：2rem；
}
/*.主导航.菜单{
显示：无；
填充：1rem；
}	*/
.菜单测试容器{
位置：绝对位置；
top:264px；
左：0；
宽度：100%；
}
.主导航.menu.toggle-on{
显示：块；
}
.主导航ul li{
最小宽度：80px；
}
.主导航{
显示：无；
填充：1rem；
位置：相对位置；
/*显示器：flex；
弯曲方向：立柱*/
背景颜色：黄色；
}
.主导航ul li a{
颜色：#fff；
文字装饰：无；
}
/*子菜单样式*/
.sub-menu.toggle-on{
显示：块；
}
.主导航ul，
.主导航系统，
.主导航{
列表样式：无；
位置：相对位置；
显示：无；
}
/*定位每个子菜单的x和y*/
.主导航{
背景颜色：粉红色；
}
.主导航{
左：150px；
排名：0；
背景颜色：蓝色；
}
.主导航{
背景颜色：绿色；
顶部：20px；
左：0；
}
.主导航{
背景色：黑色；
顶部：0px；
左：200px；
}
.主导航{
背景颜色：银色；
顶部：0px；
左：200px；
}
/*平板电脑菜单*/
@媒体屏幕和屏幕（最小宽度：768px）{
#边栏btn{
显示：无；
}
.主开关{
显示：无；
}
.主导航{
显示器：flex；
弯曲方向：行；
背景颜色：蓝色；
}
.菜单测试容器{
显示：块；
位置：相对位置；
排名：0；
}
}




+


-


-


+


+















+


+








@Shaz如果您想在较小的屏幕上更改菜单，您应该将媒体查询更改为

@media screen and (max-width: 1024px) {
 /*
   Code Here
 */
}

@media screen and (max-width: 768px) {
 /*
   Code Here
 */
}

@Shaz如果您想在较小的屏幕上更改菜单，您应该将媒体查询更改为

@media screen and (max-width: 1024px) {
 /*
   Code Here
 */
}

@media screen and (max-width: 768px) {
 /*
   Code Here
 */
}

好吧，我知道了。我想我会把它贴在这里，这样我就可以关闭ques了