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

时间:2012-05-23 16:27:35

标签: css image mobile icons shrink

我一直在重新设计我的网站以供移动使用,并意识到我的图标有点太大了。标准的16 x 16图标并不适合小屏幕。看看其他网站,即facebook的通知图标,gmail的撰写/搜索/刷新图标等等......它们似乎是12 x 12,至少在我的手机上(Galaxy Nexus ......这是双像素密度,所以真正的24 x 24,但我离题了。)

一,我是否正确地说这些图标大小为12 x 12?如果16 x 16是桌面网站图标的“标准”,那么12 x 12会成为移动网站图标的“标准”吗?

此外,在缩小图标方面...建议采用图标,这是在矢量软件中创建的相当简单的图标,并使用矢量软件缩小.svg文件,然后重新保存为。 PNG?或者,如果我使用CSS缩小它们,这些图标是否会保持完整性?

什么是最佳做法?

感谢任何帮助。谢谢!

2 个答案:

答案 0 :(得分:3)

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具有一个一致的属性(背景),其中一些随浏览器大小的变化而变化。

查看1040GridSkeleton css框架,了解一些开箱即用的解决方案。或者只是滚动你自己。

请注意,媒体查询是css3功能,在旧版浏览器中会失败。在这种情况下,将使用默认规则集(通常用于960布局)。 (有一些javascript解决方案也可以解决这个问题..)

干杯

答案 1 :(得分:3)

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