我想使用圖標進行導航。我希望這些圖標隨着屏幕尺寸變小而變小。目前，我有這個：在屏幕上自動調整圖像大小調整大小
http://jsbin.com/yesitepuwo/edit?html,css,output [？這可能是鏈接不工作在Firefox]
正如你看到的，圖像第一崩潰，所以第二個是下面的第一個。如果您進一步調整窗口大小，那麼它會變得更小，您可以看到圖像很好地調整大小。
問題是：我不希望他們崩潰，但只能調整大小。那我該怎麼做？
另一個html標記完全沒問題。但是，請不要，在小型崩潰點上，我想顯示一個漢堡菜單，並製作一個類似Android的平鋪菜單，而不是將圖標串在一起。如果您的解決方案也尊重這一點，那將會很好。 [這就是自動崩潰是好的，也許可以最小寬度設置爲圖像，使他們再次崩潰嗎？]
謝謝:)
使用：
ul{
padding: 0px;
border: 1px solid red;
}
ul:after {content:'';display:block;clear:both;}
li{
display:block;
float:left;
max-width: 50%;
}
img {
width:100%;
}
@media (max-width:300px) {
li {max-width:100%;}
}
，或者如果你的魔杖它作爲直列塊：
ul{
padding: 0px;
border: 1px solid red;
}
li{
display:inline-block;
max-width: 50%;
}
img {
width:100%;
}
@media (max-width:300px) {
li {max-width:100%;}
}
但你必須刪除您li元素之間的所有空間，因爲inline-block的作爲的話這樣對待一個瀏覽器中顯示的空間（50％+空間+ 50％> 100％）。
因此，這裏有它的工作，因爲我想它的工作兩種方法：
你需要在'li'項目或圖像指定百分比的寬度不會縮小，因爲它們總是希望成爲其繼承寬度，直到視口更改。您也可以使用'flexbox'查看菜單。問題的第二部分是要求社區爲您編寫標記。你嘗試過什麼漢堡菜單？ – disinfor
我並不打算要求加價，我只是想告訴你這是否正在進行，所以你可能會建議不會與未來計劃發生衝突的解決方案 - 就這些了。抱歉混淆。當談到漢堡菜單時，我並沒有真正嘗試過很多。我實際上是在使用bootstrap，但我有點轉向「自己做」。但是，也許我應該首先從移動視圖開始編碼 - 但我認爲問題依然存在。關於flexbox：它似乎比較新，我會提供最基本的CSS代碼。 :)爲了向後兼容。感謝li – xotix
上的提示，它實際上以設定的寬度工作，但我會優先考慮不設置。 ：/否則我不得不使用內聯CSS來設置widthon html代碼......這也是一般的屏幕大小 - 我只想讓它們調整大小，如果它們沒有剩餘空間的話：/ – xotix