根据大小获取浏览器宽度和隐藏元素？答案

【问题标题】：Get browser width and hide element depending on size?根据大小获取浏览器宽度和隐藏元素？
【发布时间】：2011-01-10 18:22:49
【问题描述】：

是否可以检测浏览器窗口的宽度并在页面上隐藏小于 1024 的元素？

也许在 JQuery 中？ :-)

【问题讨论】：

标签： javascript jquery width resolution

【解决方案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>

【讨论】：

【解决方案2】：

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

或：

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

【讨论】：