Jquery - 在特定浏览器宽度隐藏元素

Question

我试图让 jQuery 在浏览器达到特定宽度时删除元素。我对 jquery 有点陌生。我可以练习如何检测浏览器宽度，但我无法弄清楚如何说

当浏览器达到 x 宽度时删除带有 id y 的无序列表

我到目前为止有这个

jQuery(function ($) {
                $(window).resize(function(){


                });
        });

帮助赞赏

Answer 1

以下方法可行：

$(window).resize(function(){
  var width = $(this).width(); // The window width
  if (width < someSize) {
    $('#y').hide(); // Or to completely remove it form the DOM use `remove()`
  }
});

但是，样式通常最好由 CSS 来关注，如果您可以避免这种方法，请尝试这样做。

Answer 2

您可能应该使用 CSS 媒体查询来执行此操作。尝试在 Javascript 中执行此操作将会非常滞后，因为在调整窗口大小的过程中会触发所有调整大小事件。

Answer 3

您可以使用 $(window).height(); 和 $(window).width(); 来确定大小。

Answer 4

您知道通过使用 CSS 媒体查询您可以在没有 jQuery 的情况下完成此操作吗？

查看这些资源：

https://www.w3.org/TR/css3-mediaqueries/

https://mislav.net/2010/04/targeted-css/

http://protofunc.com/scripts/jquery/mediaqueries/

它仍然可以通过使用 jQuery 在 jQuery 中完成：

    jQuery(function ($) { 
            $(window).resize(function(){ 
                 var _width = $(this).width();
                 if(_width > 900 && $('#myElement').is(':visible'))
                      $('#myElement').hide();
                 else if (_width <= 900  && !$('#myElement').is(':visible'))
                      $('#myElement').show();
            }); 
    }); 

它也可以完成为：

    jQuery(function ($) { 
            $(window).resize(function(){ 
                 var _width = $(this).width();
                 if(_width > 900)
                      $('#myElement:visible').hide();
                 else if (_width <= 900)
                      $('#myElement:hidden').show();
            }); 
    });