javascript - ブラウザのサイズが変更されたときにdivを非表示にするにはどうすればよいですか？

Question

www.usatoday.comをチェックしてください。
ブラウザのサイズが変更されると、現在のセクションは非表示になります。次に、ボタン（現在は非表示になっているときに表示されます）をクリックすると、どこからともなく表示されます。同じことをしたいです。

Answer 1

CSSでメディアクエリを使用する

@media only screen and (max-device-width: 480px) {
    .mydiv{display:none;}
}

それに応じて幅を変更します。

Answer 2

これは、メディアクエリを使用して実現されます。 その他の例については、http：//mediaqueri.es/を確認してください。

ここにメディアクエリに関するいくつかのチュートリアルがあります

http://webdesignerwall.com/tutorials/response-design-with-css3-media-queries

http://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-sensitive-website/

Answer 3

非常に簡単な決定をお勧めします。これがあなたのhtmlです：

<div id="divToHide">
    TEXT THAT SHOUD DISAPPEAR
</div>
<button id="showDivToHide">
    Show div</button>

そしてそれはjavascriptコードです：

$(document).ready(function () {
    $(window).resize(function () {
        $('#divToHide').hide();
    });

    $('#showDivToHide').click(function () {
        $('#divToHide').show();
    });
});

もちろん、divを表示および非表示にする独自のルールを説明することもできます。