獲取瀏覽器寬度並根據大小隱藏元素？

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);