メディアをトリガーする方法javascriptでのstyle.widthのクエリ

Question

jQueryでonclickイベント（html）を作成しています。 私のjquery私はこのイベントの幅を設定します。

モバイルウェブサイトの幅を変更したいのですがこのために私はメディアクエリーで作業する必要があります。 デスクトップ上では50vw、電話で（600pxからトリガー）100vw ... この作業を正しく行うにはどうしますか？

function openMenu() { 
document.getElementById("menuNav").style.width = "50vw"; 
} 

function closeMenu() { 
    document.getElementById("menuNav").style.width = "0vh"; 
} 

Answer 1

if($(window).width() < 601) { 
    // change functionality for smaller screens 
} else { 
    // change functionality for larger screens 
}e 

または

if(window.matchMedia('(max-width: 600px)').matches) 
{ 
    // do functionality on screens smaller than 600px 
} 

Answer 2

通常はメディアクエリを使用できるCSSで.openクラスと.closedクラスを定義します。次に、CSSクラスをJavaScriptでmenuNavに切り替えます。 CLASSLISTのドキュメントを参照してください：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 3

あなたは（IEブラウザのビューポート）ウィンドウの幅を見つけるために、jQueryのwidth()メソッドを使用して50vwまたは100vwを使用すべきかどうかを判断することができます。

function openMenu() { 
    if($(window).width() > 600) { 
     document.getElementById("menuNav").style.width = "50vw"; 
    } else { 
     document.getElementById("menuNav").style.width = "100vw"; 
    } 
}