特别声明:
此篇文章根据Maykel的英文文章《Using CSS Sprites to optimize your website for Retina Displays 》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。CSS sprites(CSS图片精灵)已经存在很久了。事实上,八年前就有CSS Sprites的详细介绍。CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要加载更多的图片。对于小型网站,CSS Sprites并没有带来很大的变化,或许这样使用并不理想。但在是高分辨率的显示屏幕下,比如说Retina屏幕下,CSS Sprites将会起来越重要。
优化高分辨的屏幕
优化高分辨率下的屏幕下效果,你需要通过“media queries”准备一张大的图片。所以在正常分辨率下加载的是“@1x”图像,在高分辨率下加载的是@2像素下的效果。这就意味着,你的图片数要增加两倍,而且CSS样式中也需要增加两倍。
是的,我们通过javascript可以解决,但是我们没有找到通过代码真正解决的方法。但是通过css sprites技术,我们只需要通过CSS的选择器来覆盖@1x的图片。
接下来的例子中,我们只通地四个选择器来控制不同的图片资源。首先会使用Retina技术,你可以为独立的元素使用不同的代码。然后在非视网膜屏幕下使用200x200px的的CSS Sprites图片。
复制代码代码如下:
span.location {
background: url(location.png) no-repeat 0 0;
}
span.success {
background: url(success.png) no-repeat 0 0;
}
a.delete {
background: url(delete.png) no-repeat 0 -100px;
}
.content a.fav-link {
background: url(favorite.png) no-repeat 0 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
span.location {
background-image: url(location@2x.png);
background-size: 16px 14px;
}
span.success {
background-image: url(success@2x.png);
background-size: 13px 14px;
}
a.delete {
background: url(delete@2x.png) no-repeat 0 -100px;
}
.content a.fav-link {
background-image: url(favorite@2x.png);
background-size: 11px 13px;
}
}
复制代码代码如下:
span.location {
background: url(sprite.png) no-repeat 0 0;
}
span.success {
background: url(sprite.png) no-repeat -100px 0;
}
a.delete {
background: url(sprite.png) no-repeat -100px -100px;
}
.content a.fav-link {
background: url(sprite.png) no-repeat 0 -100px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
span.location,
span.success,
a.delete,
.content a.fav-link {
/* Reference the @2x Sprite */
background-image: url(sprite@2x.png);
/* Translate the @2x sprites dimensions back to 1x */
background-size: 200px 200px;
}
}