如何製作div及其文字不顯示在手機上？

Question

我有一個div（圓圈）和文字，我只想在桌面上顯示。

<div class="circle">Text Here</div> 

我可以隱藏精用這個圈子：

@media screen and (min-width: 600px) { 
.circle{ 
//Circle design 
} 
} 

然而，專區內的「文本這裏仍顯示。

任何人都知道如何隱藏文字嗎？

謝謝！

Answer 1

爲了達到預期的結果，請使用以下

CSS: 
.circle{ 
display:none; 
} 

@media screen and (min-width: 600px){ 
.circle{ 
display:block; 
} 

}

選項2： CSS

 .circle{ 
    visibility:hidden; 
    } 

    @media screen and (min-width: 600px){ 
    .circle{ 
    visibility:visible; 
    } 
} 

選項3：

@media screen and (max-width: 600px){ 
    .circle{ 
    display:none; 
    } 
} 

codepe ñ網址以供參考 - https://codepen.io/nagasai/pen/JNXypz

Answer 2

如果瀏覽器窗口小於600px的小，顯示元素與class="circle"

.circle { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .circle { 
 
    display: block; 
 
    } 
 
}

<div class="circle">Text Here</div>

Answer 3

只需在您的媒體查詢添加display:none;。

@media screen and (max-width: 600px) { 
    .circle { 
     display:none; 
    } 
} 

現在它顯示爲一個塊，但現在它會顯示爲無，當它達到600px寬。