javascript - 使用jQuery或javascript在屏幕处于特定大小时删除Div标签？

Question

嗨，我想知道使用 jQuery 或 javascript 是否可以删除某个 div 标签，以便当屏幕达到一定大小时它根本不显示，比如说 500px。

Answer 1

您应该使用matchMediaJavascript API，它现在对跨浏览器有很好的支持。

例如：

var width = window.matchMedia('screen and (width: 500px)');

matchMedia将返回一个MediaQueryList对象，其中包含一个matches布尔值，指示传入的媒体查询当前是否匹配。

这些对象的伟大之处在于，当状态发生变化时MediaQueryList，它们提供了添加和删除侦听器的方法。

例如：

width.addListener(function( mql ) {
    if( mql.matches ) {
        // yes, the device screen width is now 500 pixels
    } else {
       // no, the width is below 500 pixels
    }
});

Answer 2

你可以在 jQuery 中写这样的东西

   $(document).ready(function(){
     $(window).resize(function(){
       if($(window).width()==500)
         $('div').hide();
       else
         $('div').show();
     });
   });

Answer 3

您可以使用CSS 媒体查询来做到这一点：

@media screen and (min-width: 500px) {

    div.whatever { display: none; }

}