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

Question

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

为什么我的 <div id="div1"> 不是在我下面的代码中将浏览器的宽度调整为小于 300px 后出现并显示在屏幕上:

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