0

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

什么是最佳做法？

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

4

2 回答 2

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 有一个一致的属性（背景），还有几个随着浏览器大小的变化而变化。

查看1040Grid或Skeleton css 框架，了解一些出色的开箱即用解决方案。或者只是自己动手。

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

干杯

于 2012-05-23T18:35:54.560 回答
3

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

于 2012-10-07T19:49:17.817 回答