Question

所以我正在构建一个网站，我有一些使用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更小的屏幕上打开菜单....我尝试将min更改为max但仍然是同样的问题。请帮助:)

Answer 1

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

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

在您的JavaScript中打开和关闭open课程，这需要附加到您点击以切换菜单的任何内容。

然后在你的CSS中你可以做到：

#mySidenav {
   width: 0;
}

#mySidenav.open {
   width: 100%;
}

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

所以这样做是JS中的函数在点击时切换open类的mySidenav元素。默认情况下，CSS会mySidenav width 0，然后在应用open类时覆盖它。这也会查看视口的宽度，并根据该宽度更改所应用的宽度。

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

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

Answer 2

你误解了min-width。媒体查询上下文中的min-width表示如果视口具有给定值的最小width，则将应用它。但是，您打算通过设备的width进行查询，因此min-width和max-width对您的目的并无实际帮助。您需要分别使用min-device-width和max-device-width来查询设备的width，而不是查看视口的宽度。

Javascript媒体查询无响应

2 个答案: