How to hide div when the browser is resized? [closed]

问题

Check out www.usatoday.com.
The right now section is hidden when the browser is resized. Then it appears from nowhere when the button(which, in turn, appears when right now hides) is clicked. I want to do the same thing.

回答1:

Use media queries in your CSS

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

Change your width accordingly.

回答2:

that will be achieved using media queries check http://mediaqueri.es/ for more examples

here are some tutorials on media queries

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

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

回答3:

I suggest you very simple decision. Here is you html:

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

And that is javascript code:

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

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

Of course you can describe your own rules to hide and show your div.

来源：https://stackoverflow.com/questions/13901448/how-to-hide-div-when-the-browser-is-resized

标签

javascript

html

css

responsive-design