我想使用图标进行导航。我希望这些图标随着屏幕尺寸变小而变小。目前，我有这个：在屏幕上自动调整图像大小调整大小
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