是否可以为响应式设计缩放导航图标？答案

【问题标题】：Is it possible to scale Navigation Icons for Responsive Design?是否可以为响应式设计缩放导航图标？
【发布时间】：2012-01-06 15:38:21
【问题描述】：

所以我已经使用 max-width 属性缩放了特色图像，但我想知道是否可以在导航图像图标上实现相同的效果？这可以用图像精灵来完成吗？或者推荐的方法是什么？

【问题讨论】：

你可以使用 SVG，但我上次听说的支持仍然很粗略......

标签： image-resizing responsive-design css

【解决方案1】：

您可以根据媒体查询断点加载不同的图像大小。

/* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) {
       #navIcon {
         background-image:url('small.jpg');
       }
    }


/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
   #navIcon {
     background-image:url('normal.jpg');
   }
}

【讨论】：

【解决方案2】：

这实际上取决于您希望布局更改多少，以及是否需要满足供应商的某些要求（例如苹果的指南）

我有一个网站，其中所有菜单图像的高度都相同，如果在更宽的屏幕上使用线性布局。

当您将其更改为较小的屏幕时，我为菜单图标添加了 @media 特定大小和位置要求。例如，我希望它们堆叠起来，并且希望它们的高度为 42 像素（Apple 所说的是触摸屏的最小可触摸尺寸）

对于桌面，我将特定宽度和高度设置为“自动”，对于较窄的屏幕，我将特定高度 (42px) 和宽度设置为“自动”。

我倾向于不希望依赖多个图像，因为随着时间的推移，它确实会使维护变得更加困难。事实上，我不再在菜单中使用图像，而是使用 css 完成了所有工作（不过，我没有单调的图像精灵。我使用的是自制的 dingbat 网络字体，可以很好地缩放）

【讨论】：

【解决方案3】：

你可以按照 Kris 说的做，并通过做背景位置来使用精灵。

您也可以使用并设置高度 100%。

我会推荐 Kris 的建议。

【讨论】：