图标...调整大小还是缩小？

我一直在重新设计我的移动网站，并意识到我的图标有点太大。标准的16 x 16图标对于小屏幕来说并不是很理想。查看其他网站，即Facebook的通知图标，Gmail的撰写/搜索/刷新图标等...他们似乎是12×12，至少在我的手机（Galaxy Nexus ...这是双像素密度，如此真正的24×24但我离题）。图标...调整大小还是缩小？

一，我说的这些图标的大小是12 x 12吗？如果16 x 16是桌面网站图标的“标准”，那么12 x 12是移动网站图标的“标准”？

另外，就缩小图标的方面而言...建议您采用图标，这是在矢量软件中创建的相当简单的图标，然后使用矢量软件缩小.svg文件，然后重新另存为巴纽？或者如果我使用CSS缩小它们，这些图标是否会保持完整？

什么是最佳实践？

任何帮助表示赞赏。谢谢！

来源

2012-05-23 jstacks

这不是一个编程问题。但我离题了......使用带有背景图片的div/span作为你的元素，并用css媒体查询重新缩放（或者使用响应式框架如1140或骨架）。然后使用两个不同的图形作为背景图像。 – Bosworth99

哇。谢谢。这个解决方案很有意义。我不相信我从来没有想过这样做，而不是将图标用作图像。而且看起来，两个不同的图像，即一个12x12和一个16x16将是答案。所以，关闭调整和改变我的CSS，而不是。谢谢！ – jstacks

CSS媒体查询是肯定要走的路：

#icon { 
    backround:url(../images/sprites.png); 
    background-position:0 0; 
    height:20px; 
    width:20px;} 
//desktop 
@media only screen and (min-width: 960px) and (max-width: 1140px){ 

    body { min-width:960px; } 

    #icon { 
     background-position:-20px 0; 
     height:15px; 
     width:15px;} 

} 

//tablets 
@media only screen and (min-width: 768px) and (max-width: 959px) { 

    body { min-width:768px; } 

    #icon { 
     background-position:-32px 0px; 
     height:12px; 
     width:12px;} 

} 

//mobile 
@media only screen and (min-width: 480px) and (max-width: 767px) { 

    body { min-width:480px; } 

    #icon { 
     background-position:-50px 0px; 
     height:10px; 
     width:10px; 
}

每个重绘，对这些规则的浏览器测试，并根据需要替换它们。在上面的例子中，#icon有一个一致的属性（背景），并且有几个随着浏览器大小的变化而变化。

查看1040Grid或Skeleton css框架的一些很好的现成解决方案。或者只是推出自己的。

请注意，媒体查询是css3功能，并会在旧版浏览器中失败。在这种情况下，将使用默认规则集（通常用于960布局）。（有一些处理这个问题，以及一些JavaScript的解决方案。）

干杯

来源

2012-05-23 18:35:54 Bosworth99

最佳做法是设计专用小图标。自动从矢量图标中获取高质量的图像是不可能的。

来源

2012-10-07 19:49:17

图标...调整大小还是缩小？

回答

相关问题