如何在移動時隱藏div

-1

我發佈了一個公告div，當我使用網頁的移動版本時，我希望它消失，因爲在爲移動版本調整大小時佔用了大量空間。如何在網頁尺寸變大時隱藏div？如何在移動時隱藏div

例如：移動網上衝浪

我的代碼是

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>

來源

2017-06-18 Dan Andrei

您可以使用媒體查詢https://www.w3schools.com/css/css_rwd_mediaqueries.asp –

[Div顯示/隱藏媒體查詢]的可能重複（https://stackoverflow.com/questions/11796297/div- show-hide-media-query） –

也許他是一個新的HTML和CSS ... 嘗試使用CSS規則來實現這一目標，就像羅伯特所說的媒體質疑。

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

，並在下面的DIV的規則你的CSS文件WIRTE（可以說你的DIV有ID = 「測試」）：這條線把你的HTML頭

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

現在div在屏幕寬度大於eg時隱藏800像素。

來源

2017-06-18 00:37:45

我已經上傳了我的代碼，現在可以幫我嗎？我是新來的css –

你想在網站變大時隱藏圖標欄嗎？ –

是的。因爲它就像第二個菜單https://prnt.sc/fl28lq編輯：其實，沒關係我想通了！謝謝！ –

如何在移動時隱藏div

回答

相關問題