如何顯示某個媒體屏幕上顯示的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;} 
} 

能見度仍然影響你的佈局和元素仍然存在，只是不可見，而顯示：無隱藏元素全部一起。

還要確保在引用要放置元素的類時。名稱之前，否則它不知道你指的是什麼課程。