(本篇只介绍PNG图像问题,当然还可以用SVG来替代,后面会介绍SVG的用法。)
假设我有一个Sprite图像如下图(单个ICON尺寸为26px * 26px,这里为了演示方便,只放2个ICON)
在PC上使用如下CSS,ICON显示正常,没有出现模糊现象
[css].icon{
display: block;
width: 26px;
height: 26px;
background: url(../img/icon.png) no-repeat
}
.icon-one{
background-position: 0 0;
}
.icon-two{
background-position: 0 -26px;
}
.icon-three{
background-position: 0 -52px;
}
[/css]
但是在IPAD上ICON就会变模糊。
对于Retina屏幕显示,我们必须声明一个Media Queries,该Media Queries专门针对Retina屏幕设备显示器。我们同时改变背景大小而不是宽度和高度。这里可以用CSS的background-size属性来设置。
这里有一个公式
高分辨率图像宽度 / 目标图像宽度 = X
原始Sprites图像宽度 / x = background-size的宽度值
例如:上面的ICON的尺寸为26px * 26px
那么Retina屏幕下我们需要的尺寸就为52px * 52px,即放大两倍。
套用上面的公式:
高分辨率图像宽度(52px) / 目标图像宽度(26px) = 2
原始Sprites图像宽度(icon.png图片总宽度为78px) / 2 = background-size的宽度值(39px).
最后的一件事情。我们只计算了背景图像的宽度值,为了确保背景图像缩放比例正常,我们将“height”值设置为“auto”。当然你也可以设置相应的值(设置background-size的宽度为auto,高度为具体值),但我发现设置宽度会比较容易。
完整的CSS代码
[css].icon {
display: block;
width: 26px;
height: 26px;
background: url(../img/icon.png) no-repeat
}
.icon-one {
background-position: 0 0;
}
.icon-two {
background-position: 0 -26px;
}
/* 移动端ICON处理 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max-moz-device-pixel-ratio: 2) {
.icon {
display: block;
width: 26px;
height: 26px;
background: url(../img/icon@2x.png) no-repeat;
background-size: 39px auto;
}
/* 注意:这里的background-position还是跟上面一样,不用设置 */
}
[/css]