JavaScriptのメディアが応答しない応答

Question

私はウェブサイトを構築しているので、HTMLとJSを使用するいくつかのカスタムメニューがあります。私は変更しようとしている....私は

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よりも小さい画面上のメニューを開きます使用している場合

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

：メニューが開いているときには、画面の25％最大から最小の問題ですが、依然として同じ問題です。 Pls help :)

Answer 1

これはCSSのメディアクエリを使用しないのはなぜですか？あなたが行うことができます：オンとオフopenクラスを切り替えますあなたのJavaScriptで

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

を、これはあなたがメニューを切り替えるにはクリックしているが何であれに添付する必要があります。

次に、あなたのCSSにあなたが行うことができます：

#mySidenav { 
    width: 0; 
} 

#mySidenav.open { 
    width: 100%; 
} 

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

それでは、これがやっていることは、クリックするとJSでの機能は上とmySidenav要素のオフopenクラスをトグルされています。デフォルトでCSSはmySidenavのwidthを0とし、openクラスが適用されたときのCSSの変更を上書きします。また、これはビューポートの幅を調べ、適用される幅がそれに基づいて変化するかどうかを変更します。あなたがmin-widthを誤解

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

Answer 2

：

が開いているのナビゲーションボタンのようなものになります。 min-widthは、メディアクエリのコンテキストでは、ビューポートの最小値がwidthの場合に適用されることを意味します。ただし、デバイスのwidthでクエリを実行する予定であるため、min-widthとmax-widthは本当に目的には役立ちません。ビューポートの幅ではなく、デバイスのwidthを照会するには、それぞれmin-device-widthとmax-device-widthを使用する必要があります。