JQueryでウィンドウのサイズを自動的に変更

Question

私のサイトへの応答性を拡張するため、以下のJQueryを追加して、画面の幅が1300px未満の状況に対応しました。しかし、ほぼ完璧に動作します。画面サイズの更新は考慮されていません。画面が1300未満の場合は追加が適用されますが、画面を1300px以上に調整すると条件付きの変更が維持されます。さまざまな画面サイズで応答性のため

$(window).on('resize',function() { 
    if ($(this).width() < 1300) { 
     $("#id").appendTo("#div"); 
     $("#id").appendTo("#div"); 
    } 
}); 

Answer 1

メディアクエリは、よりよい解決策になるだろうが、あなたはすでにに次のjQueryを使用して持っているものを維持したい場合アイテムがフルサイズになったら削除します。

var isAppended = false; // place this at the top of your file 
$(window).on('resize',function(){ 
    var width = $(this).width(); 
    // dont append unless it doesnt exist 
    // and size smaller than break size 
    if (!isAppended && width < 1300) { 
    $("#id").appendTo("#div"); 
    $("#id2").appendTo("#div"); 
    isAppended = true; 
    } 
    else if (isAppended && width >= 1300) { 
    $("#id").remove(); 
    $("#id2").remove(); 
    isAppended = false; 
}); 

は

HTML

<div id="id1"></div> 

CSS

#id1 { 
    display: none; 
} 

@media (max-width: 1300px) { 
    #id1 { 
    display: block; 
    } 
} 

Answer 2

使用メディアクエリー、そのjqueryのより扱いやすい