Javascript媒体查询没有响应

所以我正在建立一个网站，我有一些使用HTML和JS的自定义菜单。当菜单打开时，它占屏幕的25%：

function opensideNav() {
    document.getElementById("mySidenav").style.width = "25%";
}
//Closes Right sidenav
function closesideNav() {
    document.getElementById("mySidenav").style.width = "0";
}

如果我使用

var mq = window.matchMedia( "(min-width: 1023px)" );

if (mq.matches) {
    function opensideNav() {
        document.getElementById("mySidenav").style.width = "25%";
    }
    //Closes Right sidenav
    function closesideNav() {
        document.getElementById("mySidenav").style.width = "0";
    }
} else {
     function opensideNav() {
        document.getElementById("mySidenav").style.width = "100%";
    }
    //Closes Right sidenav
    function closesideNav() {
        document.getElementById("mySidenav").style.width = "0";
    }
}

---

它只会在比1023…小的屏幕上打开菜单。。。。我尝试过将最小值更改为最大值，但仍然存在相同的问题。请帮助：）

为什么不直接使用CSS媒体查询？你可以做：

function toggleNav() {
    document.getElementById("mySidenav").classList.toggle("open");
}

#mySidenav {
   width: 0;
}

#mySidenav.open {
   width: 100%;
}

@media screen and (min-width: 1023px) {
    #mySidenav.open {
        width: 25%;
    }
}

在切换

打开

类的JavaScript中，需要将其附加到要单击以切换菜单的任何内容上

然后在CSS中，您可以执行以下操作：

function toggleNav() {
    document.getElementById("mySidenav").classList.toggle("open");
}

#mySidenav {
   width: 0;
}

#mySidenav.open {
   width: 100%;
}

@media screen and (min-width: 1023px) {
    #mySidenav.open {
        width: 25%;
    }
}

因此，这就是JS中的函数在单击时打开和关闭

mySidenav

元素的

open

类。默认情况下，CSS为

mySidenav

提供

0

的

width

，然后在应用

open

类时覆盖该宽度。这还会查看视口的宽度，并更改基于该宽度应用的宽度

请注意，您的“打开导航”按钮类似于：

<button onclick="toggleNav()">Menu</button>

菜单

您误解了

最小宽度

<在媒体查询的上下文中，code>min width表示如果视口具有给定值的最小

width

，则将应用它。但是，您打算按设备的

宽度

进行查询，因此

最小宽度

和

最大宽度

对您的目的没有实际帮助。您需要分别使用

min device width

和

max device width

来查询设备的

宽度，而不是视口的宽度