Javascript媒體查詢沒有迴應

所以我正在建設一個網站，我有一些使用HTML和JS的自定義菜單。當菜單打開時它是屏幕的25％：Javascript媒體查詢沒有迴應

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更小的屏幕上的菜單....我試圖改變最小到最大但仍然是同樣的問題。請幫助:)

來源

2017-04-12 ashleyclamp

爲什麼不只是使用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功能點擊時切換和關閉mySidenav元素的open類。默認情況下，CSS將給出mySidenav a width的0，然後在應用open類時覆蓋該值。這也會查看視口的寬度，並根據此寬度更改所應用的寬度。

注意打開的導航按鈕，會是這樣的：

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

來源

2017-04-12 11:53:10 DibsyJr

你誤會min-width。在媒體查詢的上下文中的min-width意味着如果視口具有給定值的最小值width，則它將被應用。但是，您打算通過該設備的width進行查詢，因此min-width和max-width對您的目的不是很有幫助。您需要分別使用min-device-width和max-device-width來查詢設備的width而不是視口的寬度。

來源

2017-04-12 11:53:11

Javascript媒體查詢沒有迴應

回答

相關問題