Retina显示屏下ICON优化方法

Jace

10年 ago

便于理解，先来了解几个名词：

dpi(dots per inch)，每英寸的点数，用来测量任何设备的硬件分辨率。一个21”的屏幕可以拥有1680 X 1050 的分辨率，27”的屏幕也可以拥有相同的分辨率，那么大屏幕比小屏幕的dpi小。
dip(device independent pixels),设备独立像素，与160 dpi显示屏上的1px相等, 又称dp。
dppx(dots per ‘px’)，每px单位上的点数。由于CSS英寸与CSS像素的固定比是1:96，那么1dppx=96dpi。
Device pixel ratio (DPR)是物理像素与CSS像素的比率。

方法一：media queries & background-size

/*
** 注意：background-size的值是sprite.png的尺寸，而不是每个icon的尺寸
*/
.sprite-icon{
    background-image:url(sprite.png);
    background-size:98px 65px;       
}

/*
** 每个icon的background-positon只需写一次，即icon相对与1x图片的位置，在@2x图片中的位置也是这个
*/
.icon-1{
    background-position:0 0;
}
.icon-2{
    background-position:-33px 0;
}
.icon-3{
    background-position:-66px 0;
}
.icon-4{
    background-position:0 -33px;
}
.icon-5{
    background-position:-33px -33px;
}
.icon-6{
    background-position:-66px -33px;
}

/* 
** 2x图片要是1x图片的准确2倍
** sprite中图标之间的间隙，也应是2倍
** 每个图标无需重新写background-position
*/
@media (min-resolution:2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio:2)  /* Safari & Android Browser */
{
    .sprite-icon{
        background-image:url(sprite@2x.png); 
    }  
}

方法二：background-image:img-set( url(a.png) 1x, url(a@2x.png) 2x )

媒体查询（media queries）已经可以解决高密度显示问题，为什么还需要image-set？问的好。使用image-set的两个主要好处：

与媒体查询不同的是，image-set没有告诉浏览器使用哪个图片，而是提供了一些选项。我希望将来在低网速下使用高密度设备，能够告诉浏览器使用低分辨率图片。如果浏览器能够根据当前的网络状况智能地选择使用的图片，那就更好了。媒体查询的问题是没有给浏览器任何自由裁决权，它明确的指明，如果像素密度大于1或者2，浏览器就使用特定的图片。我知道，这只是理论上（更是“意淫“出来）的好处。如今支持“image-set”的浏览器只是简单将图片源与显示密度相匹配，并没有提供额外的功能。但我坚信，同一张图片需要不同分辨率时，让浏览器去选择合适的图片是方向。
CSS编码好处：将不同分辨率的图片源集中在一起。

查看demo

/* ** 注意： ** 图片要求：2x图片要是1x图片的准确2倍，sprite中图标之间的间隙也应是2倍 ** 无需写background-size,浏览器自动处理 ** */ 
.sprite-icon{ 
    background-image:url(sprite.png); 
    background-image: -webkit-image-set( url('sprite.png') 1x, url('sprite@2x.png') 2x ); 
}

/* ** 每个icon的background-positon只需写一次，即icon相对与1x图片的位置，在@2x图片中的位置也是这个 */ 
.icon-1{
     background-position:0 0; 
} 
.icon-2{ 
    background-position:-33px 0; 
} 
.icon-3{ 
    background-position:-66px 0; 
} 
.icon-4{ 
    background-position:0 -33px; 
} 
.icon-5{ 
    background-position:-33px -33px; 
} 
.icon-6{ 
    background-position:-66px -33px; 
}

方法三： media queries & background-size，适用于仅部分图标提供了2x图，且icon位置不对应，可能是由工具生成的sprite。

查看demo

.sprite-icon{
    background-image:url(more.png);
}
.icon-1{
    background-position:0 0;
}
.icon-2{
    background-position:-33px 0;
}
.icon-3{
    background-position:-66px 0;
}
.icon-4{
    background-position:0 -33px;
}
.icon-5{
    background-position:-33px -33px;
}
.icon-6{
    background-position:-66px -33px;
}
.icon-7{
    background-position:0 -66px;
}

/* 
** 每个icon的backgroud-size是2x图片的一半
** 每个icon的backgroud-position是相对与2x图片的位置除以2
*/
@media (min-resolution:2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio:2)  /* Safari & Android Browser */
{
    .icon-1{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:0 0;
    }
    .icon-2{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:-33px 0;
    }
    .icon-3{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:-66px 0;
    }
    .icon-4{
        background-image:url(portion@2x.png);
        background-size:197px 65px;
        background-position:-99px -33px;
    }
    .icon-5{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:-132px -33px;
    }
    .icon-6{
        background-image:url(portion@2x.png);
        background-size:197px 65px;
        background-position:-165px -33px;
    }

}