Отображение и скрытие div с помощью запроса CSS @media не работает

Question

Когда ширина моего браузера превышает 300 пикселей, мой <div id="div1"> скрывается с display: none.Однако, если экран браузера имеет ширину менее 300 пикселей, он должен отображаться с display: inline-block.

Почему мои <div id="div1"> не отображаются и не отображаются на экране после настройки ширины браузераменьше 300 пикселей в моем коде ниже:

@media screen and (max-width: 300px){
  #div1 { display: inline-block;}
}

#div1 { display: none; }

<!--My HTML-->
<div>
  Some content 1
</div>
<div id="div1">
  Some Content 2
</div>
<div>
  Some content 3
</div>

Этот JSFiddle предлагает небольшое окно результатов, в котором можно настроить ширину окна.

Answer 1

Поскольку вам нужно сначала объявить display: none;, CSS работает сверху вниз:

#div1 { 
  display: none; 
}

@media screen and (max-width: 300px) {
  #div1 {
    display: inline-block;
  }
}

Надеюсь, это поможет!

Answer 2

@media запросы не меняют специфику.Совсем.Они просто применяют код или игнорируют его, в зависимости от предоставленного условия.

Следовательно, ваш код преобразуется в:

#div1 { display: inline-block;}
#div1 { display: none; }

ниже width: 300px

и в

#div1 { display: none; }

над ним.

Вам нужно поставить последний символ @media, если специфичность селекторов остается прежней.

#div1 { display: none; }

@media (max-width: 300px){
  #div1 { display: inline-block;}
}

<div>
  Some content 1
</div>
<div id="div1">
  Some Content 2 - only visible up to max-width:300px
</div>
<div>
  Some content 3
</div>

Answer 3

Вам необходимо изменить порядок ваших каскадных стилей

Примечание: ни один из них не должен быть переопределен дисплеем, чтобы он отображался вообще

#div1 { display: none; }

@media screen and (max-width: 300px){
  #div1 { display: inline-block;}
}

Answer 4

Потому что css читается сверху вниз.Правило, которое установлено последним, будет выполнено, поэтому замените позицию медиазапроса

#div1 { display: none; }
@media screen and (max-width: 300px){
  #div1 { display: inline-block;}
}

<!--My HTML-->
<div>
  Some content 1
</div>
<div id="div1">
  Some Content 2
</div>
<div>
  Some content 3
</div>

Answer 5

Измените ваш код, как показано ниже:

#div1 { display: none; }

@media screen and (max-width: 300px){
  #div1 { display: inline-block;}
}