Сделайте элемент активным, когда сделан медиа-запрос

Question

@media only screen and (max-width: 480px) {
   #media_wrapper {
    height: 100%; //// ?????
    display: inline-block;
   }
}
#media_wrapper {
  height: 100%;
  display: none;
}

Как видите, элемент не активен для больших экранов display: none;, но я не знаю, как правильно установить атрибут отображения в запросе для отображения на маленьком экране, после попытки, например: block или inline-block, результат один - ничего не отображается. Что я делаю не так?

Answer 1

Попробуйте это

Проверьте демо ЗДЕСЬ

Обратный ход

CSS:

#media_wrapper {
  height: 100%;
  display: none;
}
@media only screen and (max-width: 480px) {
   #media_wrapper {
    height: 100%; 
    display: inline-block;
   }
}

Answer 2

лучший способ - изменить порядок команды:

См. Скрипку: https://jsfiddle.net/17d6hxsL/5/

#media_wrapper {
  height: 100%;
  display: none;
}
@media only screen and (max-width: 480px) {
   #media_wrapper {
    display: block;
   }
}

.wrapper{
  height:100%;
}

<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>

Или вы должны установить !important для предотвращения переопределения:

См. Скрипку: https://jsfiddle.net/17d6hxsL/4/

@media only screen and (max-width: 480px) {
   #media_wrapper {
    display: block!important;
   }
}
#media_wrapper {
  height: 100%;
  display: none;
}
.wrapper{
  height:100%;
}

<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>