javascript - サイズに応じてブラウザの幅を取得し、要素を非表示にしますか?

Question

ブラウザ ウィンドウの幅を検出し、1024 未満の場合はページ上の要素を非表示にすることは可能ですか?

おそらくJQueryで？:-)

Answer 1

これは、 CSS メディア クエリを使用して実現できます。

@media (max-width: 1024px) {
  #someElement { display:none; }
}

一部の古いブラウザーはメディア クエリをサポートしていないため、jQuery を使用してこれを行うこともできます。この例では、ウィンドウのサイズが変更されたときに要素を表示/非表示にします

<div id="someElement">SOME ELEMENT</div>

<script>
  $(function() {
    $(window).bind("resize", function() {
      $('#someElement').toggle($(this).width() >= 1024);    
    }).trigger("resize");
  });
</script>

Answer 2

if ($(window).width() < 1024) {
    $('#someElement').hide();
}

また：

$('#someElement').toggle($(window).width() >= 1024);