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 nはURLは参考のために - ブラウザウィンドウが600PXよりも小さい場合https://codepen.io/nagasai/pen/JNXypz

Answer 2

、単にあなたのメディアクエリでdisplay:none;を追加class="circle"

.circle { 
 
    display: none; 
 
} 
 

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

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

Answer 3

を持つ要素を示しています。

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

今はブロックとして表示されていますが、現在は600pxの幅に達した場合は表示されません。