Html 如何使用@media在我的网站顶部设置不同的横幅？

我正试图让我的网站有一个单独的顶部横幅时，桌面模式移动模式与响应@媒体标签

所以，我一直在努力理解我做错了什么？我试图使其在桌面模式下，它将使用桌面顶部标题横幅，但当它达到大约850px的宽度时，它将切换到移动顶部标题，该标题是图标，而不是标题上的文本

无论我尝试什么，它似乎都不起作用，而且无论网站的宽度如何，两个标题都存在。
我试过使用这样的代码

@media (max-width:850px){
.mobile_menu{
    display:none !important; 
    }
}

@media (max-width:2000px min-width:850px){
.top-menu-container{
    display:none !important;
    }
}

---

如果有人能帮助我，我将不胜感激。如果我只是很愚蠢，没有意识到一些事情，我将提前道歉，因为我对CSS中的整个@media编码还相当陌生

这就是您要寻找的：

@media only screen and (max-width:850px) {
    /* STYLES HERE */
}

@media only screen and (min-width:851px) and (max-width:2000px) { 
    /* STYLES HERE */
}

---

你需要使用

和

啊，谢谢，我现在就试试，然后回来汇报：）好的，我刚刚根据你的建议修改了代码，它没有改变任何东西。我觉得可能是我在别的地方做错了什么，但我不确定。无论如何，谢谢你的帮助！仅<代码>功能是什么？是否有必要？唯一的关键字可防止不支持具有媒体功能的媒体查询的旧浏览器应用指定的样式。它对现代浏览器没有影响。看到2000px以上会发生什么吗？