爲設備設置水平菜單大小調整

Question

在下面的導航菜單中，是否有人可以告訴我如何讓它響應iPad的寬度調整到iPhone等等。我讓它看起來完全如何我想要它在桌面上，但是當我在iPad或iPhone上查看網站的菜單太寬，仍然導致頁面的主要內容看起來更小且偏離中心。

CSS

#menu, #menu ul { 
    margin: 0 auto; 
    padding: 0; 
    background-color: #FFFFFF; 
} 

#menu { 
    display: table; 
    width: 100%; 
    list-style: none; 
    position: relative; 
    top: -30px; 
    text-align: center; 
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    font-size: 18px; 
    height: 20px; 
    z-index: 101; 
} 

#menu.fixed { 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

#menu li { 
    display: table-cell; 
    list-style: none; 
    padding-right: 50px; 
    left: 50px; 
    vertical-align: middle; 
} 

#menu > li:hover > ul { 
    background: #FFF; 
    display: block; 
    left: 0; 
    width: 100%; 
    -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75); 
    box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75); 
    border-top: thin dotted #999; 
    top: 32px; 
} 

#menu > li > ul { 
    display: none; 
    position: absolute; 
    text-align: center; 
} 

#menu li a { 
    display: block; 
    padding: 2px 10px; 
    text-decoration: none; 
    font-weight: lighter; 
    white-space: nowrap; 
    color: #333; 
} 

#menu li a:hover { 
    color: #CCCCCC; 
    font-size: 18px; 
    vertical-align: middle; 
} 

#menu li ul li { 
    display: inline-block; 
    float: none; 
} 

HTML

<div id="menu"> 
<ul> 
    <li><a href="#">Milk</a></li> 
    <li><a href="#">Eggs</a></li> 
    <li><a href="#">Cheese</a></li> 
    <li><a href="#">Vegetables</a></li> 
    <li><a href="#">Fruit</a></li> 
</ul> 
</div> 

Answer 1

你確實應該使用CSS媒體查詢。

通過使用@media (min-width: 768px){}您告訴瀏覽器，所有高於768px寬度的窗口將包含以下css代碼。這是使用它的正確方法，因爲這是一種移動的第一種方法，不熟悉該術語..谷歌它。

只要將display: table-cell;更改爲display: table-row作爲移動格式，就會將項目置於對方之下。

我做了一個例子，通過使用上面的東西，包括一個html按鈕和一個小jQuery。

觀看演示here

Answer 2

嘗試這樣的：LINK

CSS：

@media handheld, only screen and (max-width: 768px) { 
    #menu li { 
     clear:both; 
     float:none; 
     display:block; 
     background-color:#f0f0f0; 
     margin-bottom:2px; 
    } 
} 

根據您需要的設備，只需更改媒體查詢的最大寬度

Answer 3

只需使用媒體查詢，找到要優化的設備的尺寸並在媒體查詢中指定這些尺寸即可。之後，你可以選擇菜單欄上的類並創建新的規則和利潤率等

::來源::

http://www.w3schools.com/css/css_mediatypes.asp

http://www.youtube.com/watch?v=aPtA4nYkvDw - 扈利的頻道和網站是真正有用的。