javascript - jqueryウィンドウ幅条件

Question

後で編集:私はこれを試しました:

$(document).ready(function() {
if ( $(window).width() > 800 ) {
    $("#header").hide();
}
else {
$("#header").show();
}

});

ウィンドウのサイズを 800 未満に変更しても、ヘッダーはまだ見えません。何が問題ですか ？ウィンドウが 800 より大きいときに他の機能を実行したいので、css メディア クエリを使用できません。

Answer 1

JQuery を使用して Javascript でこれを行いたい場合は、おそらくいくつかのことを知りたいと思うでしょう: 現在の幅と、ユーザーがサイズ変更した後の幅は? おそらく次のようなコードになります。

function checkSize(){
  if ( $(window).width() > 1200 ){
    //do whatever
  }
}

//When the page is loaded
$(document).ready(function(){
  //Add a listener to check the size of the document when you load
  $(document).resize(checkSize);

  //Check the size now.
  checkSize();
});

別の方法として、CSS メディア クエリを使用して、ページが特定のサイズの場合に CSS を調整することもできますが、JavaScript は実行されません。次に例を示します。

@media all and (max-width: 1199px) {
  #header{
    display:none;
  }
}

これには、さらに役立つ例と説明があります: http://css-tricks.com/css-media-queries/