Javascript CSS媒体查询未响应jquery

我创建了一个媒体查询，当屏幕宽度小于415px时，文本会变小，我还将添加一个汉堡菜单。但是我用“name”变量测试它，它没有响应。在过去的2-3小时里，我一直在研究这个问题，但我找不到一个有效的答案。我在想，也许j查询会阻止它工作，因为我只有在单击导航按钮时才将“name”变量设置为hidden。这是我的密码。其余的将在代码笔中

HTML

---

稍后声明的CSS规则优先于之前声明的CSS规则，媒体查询不会增加优先级，因此它不起作用，因为

@media screen and (max-width: 415px) {
    #name{
        font-size: 2em;
    }
}

先于

#name{
    color:white;
    font-size: 6em;
    position: relative;
    top:30%;
    text-shadow: 2px 2px grey;
    z-index: 10;

}

---

在你的档案里。将媒体查询移动到另一个规则之后，它将工作。

而且您在js中编写了很多不需要的js，很多这可以通过css3完成，试试这个，这将节省您的浏览器绘制页面的时间。

出现javascript错误。查看您的浏览器console@Swiftor277很乐意帮忙。如果答案解决了你的问题，请接受。

@media screen and (max-width: 415px) {
    #name{
        font-size: 2em;
    }
}

#name{
    color:white;
    font-size: 6em;
    position: relative;
    top:30%;
    text-shadow: 2px 2px grey;
    z-index: 10;

}