@media query控制导航移动端隐藏后，切回桌面端无法重新显示问题

你遇到的问题核心是行内样式优先级高于CSS类选择器：

• 你用JS直接修改x.style.display，会给元素加上行内style属性，行内样式优先级比媒体查询里的类样式优先级高
• 当你在移动端手动把导航设为display:none之后，窗口拉伸回桌面尺寸时，CSS里桌面端的默认display:block（你没给桌面端.nav-wrap设display，默认就是block）优先级不够，覆盖不了行内的display:none，所以导航不会显示

不要直接操作行内display属性，改用CSS类切换的方式控制移动端导航显隐，修改步骤如下：

1. 调整CSS代码
   找到max-width: 550px的媒体查询块，修改.nav-wrap相关的显隐规则，新增移动端专属的显隐类：

@media only screen and (max-width: 550px) {
    .btn {
        border-left: 0;
        border-top: 0;
        border-right: 0;
        border-bottom: 3px dotted rgb(107, 107, 107);
        color: white;
    }
    .nav-wrap {
        background-color: rgba(17, 17, 17, 0.801);
        /* 移动端默认隐藏导航 */
        display: none;
    }
    /* 新增：移动端导航显示时的专属类 */
    .nav-wrap.mobile-show {
        display: block;
    }
    .nav {
        column-gap: 20px;
    }
}

2. 修改JS点击逻辑，切换CSS类而非修改行内样式
   把原来的myFunction替换为：

function myFunction() {
    var nav = document.getElementById('mobile-nav');
    nav.classList.toggle('mobile-show');
}

• 桌面端（宽度大于550px）的CSS规则里没有定义.mobile-show类的样式，不管这个类有没有加在元素上，.nav-wrap都会使用默认的display:block属性，窗口拉伸回桌面尺寸时导航会自动恢复显示
• 移动端宽度下，.nav-wrap默认隐藏，点击红色按钮切换mobile-show类就能控制导航显隐，完全不会影响桌面端的样式规则

内容的提问来源于stack exchange，提问作者evansd321