根據尺寸獲取瀏覽器寬度並隱藏元素？

Question

如果瀏覽器窗口的寬度小於1024，是否可以檢測瀏覽器窗口的寬度並在頁面上隱藏一個元素？

在JQuery中也許？ :-)

Answer 1

您可以使用CSS media query做到這一點。

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