Question

我一直在重新设计我的网站以供移动使用，并意识到我的图标有点太大了。标准的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缩小它们，这些图标是否会保持完整性？

什么是最佳做法？

感谢任何帮助。谢谢！

Answer 1

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解决方案也可以解决这个问题..）

干杯

Answer 2

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

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

2 个答案: