画面サイズに応じて要素の幅を変更します

Question

親に定義された幅、つまり'30％ 'を指定しています。その親はjqueryライブラリのsidenavです。私は、600px幅以下で '100％'、600px幅以上で'30％ 'のようなjavascriptを使って、onClickイベントを持つデバイスの画面サイズに応じて幅を変更したい。私はすでにCSSのメディアクエリを使用してみましたが、CSSのプロパティはJavaScriptによってオーバーライドされています。それを行う方法を手伝ってください。

$('.menu-list a').click(function (e) { 
    e.preventDefault(); 
    var hide = $(this).data("hide"); 

    if (hide == true) { 
     $(this).parent().parent().animate({ 
      width: '30%' 
     }, 800); 
     $('#mobile li').css('display', 'none'); 
     $('#mobile .close').css('display', 'block'); 
     $('#mobile .user-logo').css('display', 'none'); 
    } else { 
     $(this).parent().parent().animate({ 
      width: '30%' 
     }, 800); 
     $('#mobile li').css('display', 'none'); 
     $('#mobile .close').css('display', 'block'); 
     $('#mobile .user-logo').css('display', 'block'); 
     $('#mobile .user-logo #edit-btn').css('display', 'inline-block'); 
    } 

    var url = $(this).attr('href'); 
    $.ajax({ 
     url: url, 
     beforeSend: function (data) { 
      $('#content-here').html(loader); 
     }, 
     dataType: 'html', 
     success: function (data) { 
      setTimeout(function() { 
       $('#content-here').html(data); 
      }, 1000); 
     } 
    }); 

    $('#mobile #content-here').css('display', 'block'); 
}); 

Answer 1

単にあなたがこのjqueryの機能を使用して、Windowsの幅を見つけることができます： $（ウィンドウ）.width（）; とあなたのコードは次のようになる：

if($(window).width() > 600){ 
//make sidenav 30% 
} 
if($(window).width() < 600){ 
//make sidenav 100% 
} 

と単にあなたは、クリックイベント内でこのコードを貼り付けることができます。まず、clickイベント内に幅をキャッシュする必要があります。そのため、ボタンをクリックするたびに幅が計算されます。 あなたはその論理を理解することを願っています。

Answer 2

CSSメディアクエリは、より簡単な解決方法です。

element{ 
    width:30%; 
} 
@media (max-width: 600px) { 
    element { 
    width:100% 
    } 
} 

それでもjQueryのを使用する場合：

$("yourElement").css({"width":"30%"}); 
if(screen.width<"600") $("yourElement").css({"width":"100%"});