How do I make a div not display, if the browser window is at a certain width? [duplicate]

问题

I want some images to not be displayed if the persons browser window is too small. Would I do this in CSS or Javasript, and if so, how?

回答1:

@media all and (max-width: 500px){ /* max screen size */
    #div { display: none; }
}

回答2:

You don't have to use JavaScript, you can simply do it with CSS @media queries

@media all and (max-width: 699px) { /* Change Width Here */
  div.class_name {
    display: none;
  }
}

回答3:

You can do this in css using @media tags

   /*Show images for resolution greated than 1024*/
   @media only screen and (min-width: 1024px) {        
    img{ /*show all images*/
        display:block;
    }         
    }
    /*hide images for resolution lesser than 1024*/
    @media only screen and (max-width: 1024px) {        
    img{ /*hide all images*/
        display:none;
    }        
    }

In @media tags you can target specific device or all like screen alone, affect in print , mobile device etc or all

For doing this in javascript/jquery refer the below post,

How to detect in jquery if screen resolution changes?

来源：https://stackoverflow.com/questions/16459304/how-do-i-make-a-div-not-display-if-the-browser-window-is-at-a-certain-width

标签

javascript