モバイル時にdivを非表示にする方法

Question

モバイル版のサイズを変更した場合、多くのスペースを占めているため、モバイル版のウェブページを使用するとアナウンスdivを作成して消滅させたいと思います。 ウェブページのサイズが大きくなったときにdivを非表示にするにはどうすればよいですか？例えば

：モバイルウェブサーフィン

私のコードは、たぶん彼はこれを達成するためのCSSルールを使用するように... てみHTMLとCSSに新しいです

body {margin:0;} 
 

 
.icon-bar { 
 
    width: 100%; 
 
    background-color: #0088B8; 
 
    overflow: auto; 
 
} 
 

 
.icon-bar a { 
 
    float: left; 
 
    width: 20%; 
 
    text-align: center; 
 
    padding: 12px 0; 
 
    transition: all 0.3s ease; 
 
    color: white; 
 
    font-size: 36px; 
 
} 
 

 
.icon-bar a:hover { 
 
    background-color: #0073C4; 
 
} 
 

 
.active { 
 
    background-color: #9b0a0a !important; 
 
}

<div class="icon-bar"> 
 
    <a href="./index.php"><i class="fa fa-home"></i></a> 
 
    <a href="./search.php"><i class="fa fa-search"></i></a> 
 
    <a href="./news.php"><i class="fa fa-envelope"></i></a> 
 
    <a href="./search.php?search_id=unanswered"><i class="fa fa-globe"></i></a> 
 
    <a href="#"><i class="fa fa-trash"></i></a> 
 
</div>

Answer 1

です、ロバートはメディアのクエリを言ったように。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

そして、あなたのdiv-ルール以下のCSSファイルのwirteで（あなたのdivにid = "test" を持って言うことができます）： は、このラインはあなたのhtml頭に入れて

@media only screen and (min-width: 800px) { 
    #test { 
     display: none; 
    } 
} 

今divは、画面の幅が例えば800px