使用 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 提供了一个小结果 window，您可以在其中调整 window 的宽度。

Answer 1

如下所示编辑您的代码：

#div1 { display: none; }

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

Answer 2

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

NB 显示 none 将被显示覆盖，以便完全显示

#div1 { display: none; }

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

Answer 3

因为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 4

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

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

#div1 { 
  display: none; 
}

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

希望对您有所帮助！

Showing and hiding divs using CSS @media query not working