CSS精灵优化Retina显示屏下的网站图像
Retina Display的出现有好有坏吧,坏处就是我们设计师要多做一份@2x版本的图像,如果不做的话在Retina显屏下会模糊。既然要做2份了,哪么我们可以利用CSS精灵(css sprites)来优化一下,CSS 精灵我想很多已经使用这项技术,具体制作过程网上有很多,本文主要讲如何用CSS精灵来优化Retina显示屏下的网站图像。
准备好图像
左边是普通图像,右边是Retina的图像(@2x)。
HTML代码:
<span class="location">location</span> <span class="success">success</span> <span><a class="delete">delete</a></span> <span class="content"><a class="fav-link">fav-link</a></span>
使用独立图片写法
- location.png
- success.png
- delete.png
- favorite.png
- location@2x.png
- success@2x.png
- delete@2x.png
- favorite@2x.png
CSS代码:
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; } }
使用CSS精灵写法
- sprite.png
- sprite@2x.png
CSS代码:
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 sprite's dimensions back to 1x */ background-size: 200px 200px; } }
判断为Retina显示屏的JS
我们可以能过[code]window.devicePixelRatio[/code]来判断是否为Retina显示屏。
JavaScript
[javascript]
if(window.devicePixelRatio == 2){
//for Retina Display
}
[/javascript]
不需要制作@2X版本图片的解决方案
如果你觉得为了支持Retina显示而制作两个图像版本是件很麻烦的事情,哪么你可以参考《Retina 显示屏下 @2x 图片的模拟》这篇文章。
赞助商链接
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。