如何显示显示的html元素:在特定的媒体屏幕上没有

how to display an html element which is display:none at certain media screen

本文关键字：显示 媒体 屏幕 元素 何显示 html      更新时间：2023-09-26

我有一个标题，我想以一定的屏幕大小显示它。对于较大的屏幕大小，我使用display：none。但是对于较小的屏幕，如何使相同的div可见。请帮忙。

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

将第二行更改为this。

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

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

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

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

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

它应该看起来像这样：

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

可见性仍然会影响布局，并且元素仍然存在，但不可见，而display:none会将元素全部隐藏在一起。

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

相关文章：