如何在某个媒体屏幕上显示一个display：none的html元素

Question

我有标题，我想在某个屏幕尺寸显示。对于更大的屏幕尺寸，我使用display：none但是对于小屏幕，如何使相同的div可见。 请帮忙。

@media screen and (max-width:960px){
   mydiv {display:none;}
}

@media screen and (max-width:480px){
   mydiv {visibility: visible;}
}

Answer 1

将第二行更改为此。

@media screen and (max-width:480px){ mydiv {display: block;} }

对于隐藏/显示，我们通常使用display:none;和display:block;

我们还可以使用visibility:hidden;和visibility:visible;

但display和visibility是完全不同的属性。最重要的是 - 如果框设置为visibility:hidden;（它将完全透明，不会绘制任何内容），但仍会影响布局。

https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

Answer 2

看起来应该是这样的：

@media screen and (max-width: 960px){
    .mydiv{display:none;}
}
@media screen and (max-width: 480px){
    .mydiv{display:block;}
}

可见性仍会影响您的布局，元素仍然存在，但不是可见，而display：none会将元素全部隐藏起来。

还要确保在引用要放置的元素类时。在名称之前，否则它不知道你指的是什么类。