如何改變一個div的內容時，瀏覽器被降低或提高

Question

我有一個兩難我一直在試圖進行排序。

我有，取決於瀏覽器尺寸的縮小寬度的網站。但問題是，它只能去低至1000像素的任何低於將意味着菜單將重疊標誌，它並不十分好看。

有一件事我可以做的是改變設計都在一起，但是這需要時間，因爲我已經在這個當前的設計花了無數時間。

實際上，我設計了iPad和銘記移動用戶，基本上我想要的菜單項，以減少數量取決於可用的空間。

例如，如果我有以下菜單項（家庭，關於，服務，產品，常見問題，聯繫我們），當遇到更小的寬度時，它應該可能擺脫產品，常見問題和聯繫我們，一個菜單圖標，用戶可以點擊並查看剩餘的菜單項。

下面是我目前：

<div id="menu"> 
    <a href=index.php>Home</a> 
    <a href=about.php>About</a> 
    <a href=services.php>Services</a> 
    <a href=products.php>products</a> 
    <a href=faq.php>FAQ</a> 
    <a href=contact.php>Contact</a> 
</div> 

Answer 1

你應該考慮使用媒體查詢。這Mozilla開發者本文將幫助你很多，https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries。它基本上是通過在您設置的條件下顯示某些內容來工作的。例如，如果屏幕小於1000像素，則顯示一個div，如果較大則顯示另一個div。如果您需要額外支持設置，我很樂意提供幫助。

Answer 2

，如果你想保持它的簡單，你可以使用CSS媒體查詢，這應該添加display:none;到hide-from-menu類時，瀏覽器下方1000px分辨率

CSS

@media screen and (max-width: 1000px){ /* or some else breakpoint*/ 
    .hide-from-menu{ 
    display:none; 
    } 
} 

HTML

<div id="menu"> 
<a href="index.php">Home</a> 
<a href="about.php">About</a> 
<a href="services.php">Services</a> 
<a class="hide-from-menu" href="products.php">products</a> 
<a class="hide-from-menu" href="faq.php">FAQ</a> 
<a class="hide-from-menu" href="contact.php">Contact</a> 
</div>