使用CSS @media查询显示和隐藏div不起作用

Question

当我的浏览器宽度大于300px时，我的<div id="div1">被display: none隐藏。但是，如果浏览器屏幕的宽度小于300px，则应显示display: inline-block。

在我的以下代码中将浏览器的宽度调整为小于300px后，为什么我的<div id="div1">却没有显示并显示在屏幕上？

@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

因为从上到下读取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 2

因为您需要首先声明display: none;，所以CSS从上到下运行：

#div1 { 
  display: none; 
}

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

希望这会有所帮助！

Answer 3

如下所示编辑代码：

#div1 { display: none; }

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

Answer 4

您需要颠倒级联样式的顺序

NB显示不能被显示覆盖，从而使其完全显示

#div1 { display: none; }

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

Answer 5

@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>