如何显示某个媒体屏幕上显示的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;} 
} 

能见度仍然影响你的布局和元素仍然存在，只是不可见，而显示：无隐藏元素全部一起。

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