javascript - jQueryまたはjavascriptを使用して画面が特定のサイズのときにDivタグを削除しますか?

Question

こんにちは、jQuery または javascript を使用して、特定の div タグを削除して、画面が特定のサイズ (たとえば 500px) になったときにまったく表示されないようにすることを知りたいと思いました。

Answer 1

現在、ブラウザ間で非常にmatchMedia優れたサポートを提供している Javascript 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; }

}