javascript - 如果浏览器窗口处于一定宽度，如何使 div 不显示？

Question

如果人员浏览器窗口太小，我希望不显示某些图像。我会在 CSS 或 Javasript 中执行此操作，如果是，如何执行？

Answer 1

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

Answer 2

您不必使用 JavaScript，只需使用 CSS 即可@media queries

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

Answer 3

您可以使用@media 标签在css中执行此操作

   /*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;
    }        
    }

在@media 标签中，您可以单独定位特定设备或所有类似屏幕，影响打印、移动设备等或所有

要在javascript/jquery中执行此操作，请参阅以下帖子，

如果屏幕分辨率发生变化，如何在 jquery 中检测？