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像素（苹果称触摸屏的最小可触摸尺寸）

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

我倾向于不想依赖多个图像，因为它确实使得随着时间的推移更难以维护。事实上，我停止使用图像作为我的菜单，并使用css做了所有事情（虽然我没有单调的图像精灵。我使用自制的dingbat web字体可以很好地扩展）

Answer 3

你可以做Kris所说的加上使用精灵来做背景位置。

你也可以使用100％的高度。

我会推荐Kris建议的内容。

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

3 个答案: