image-resizing - 是否可以为响应式设计缩放导航图标？

Question

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

Answer 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');
   }
}

Answer 2

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

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

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

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

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

Answer 3

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

您也可以使用 100% 的高度。

我会推荐克里斯的建议。