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

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

你可以做什么克里斯说加上使用一个精灵做背景位置。

你也可以使用和做一个高度100％。

我会推荐克里斯建议的。

Answer 3

这真的取决于你想要多少布局改变，如果你需要匹配的供应商有一定的要求（苹果的准则，例如）

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

将其更改为更小屏幕的那一刻我包含了@media特定的大小和菜单图标的放置要求。例如，我希望它们堆叠，我希望它们的像素高度为42像素（Apple称触摸屏的最小可触摸尺寸）

对于桌面，我将特定宽度和高度设置为'auto'，而对于更窄的屏幕，我有一个特定的高度（42像素），宽度设置为'自动'。

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