Как сделать так, чтобы 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

Вы можете сделать это в CSS, используя теги @media

   /*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, если разрешение экрана меняется?