应用css sprites来提升你的网站在Retina显示屏下显示

2021-01-20 12:20 jianzhan

非常申明:此篇文章内容依据Maykel的英小蜜章《Using CSS Sprites to optimize your website for Retina Displays 》开展汉语翻译,全部译文带有大家自身的了解与观念,假如译得不太好或不对的地方还请同行业盆友指导。CSS sprites(CSS照片小精灵)早已存在很久了。客观事实上,8年前就有CSS Sprites的详尽详细介绍。CSS Sprites为1些大中型的网站节省了带宽,让提升了客户的载入速率和客户体验,不必须载入更多的照片。

针对小型网站,CSS Sprites并沒有带来很大的转变,也许这样应用其实不理想化。但在是高辨别率的显示信息显示屏下,例如说Retina显示屏下,CSS Sprites可能起来越关键。

提升高辨别的显示屏

提升高辨别率下的显示屏下实际效果,你必须根据“media queries”提前准备1张大的照片。因此在一切正常辨别率下载入的是“@1x”图象,在高辨别率下载入的是@2像素下的实际效果。这就代表着,你的照片数要提升两倍,并且CSS款式中也必须提升两倍。

是的,大家根据javascript能够处理,可是大家沒有寻找根据编码真实处理的方式。可是根据css sprites技术性,大家只必须根据CSS的挑选器来遮盖@1x的照片。

接下来的事例中,大家只通地4个挑选器来操纵不一样的照片資源。最先会应用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 ⑴00px;
}
.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 ⑴00px;
}
.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 ⑴00px 0;
}
a.delete {
background: url(sprite.png) no-repeat ⑴00px ⑴00px;
}
.content a.fav-link {
background: url(sprite.png) no-repeat 0 ⑴00px;
}
@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显示屏下的机器设备,现阶段仅在IOS的挪动机器设备iPhone4s、iPhone5、iPad、iPod和Mackbook Pro。针对Android系统软件下,要取决于你的系统软件,选用不一样的“min-device-pixel-ratio”。

总结
    不可该将全部的資源引进1个文档中,应当应用CSS sprite 来集成化照片。建立@2x的sprites图,这个图恰好是一般图的两倍,并且具备双重拓展在Retina显示屏下,对应的元素上应用同样的Scripts照片应用background-size特性来保证你的@2x Sprites图正明确位

留意,这只是1个简易的事例,里边对3个元素设定了情况图,你能够依据必须在你的站点上应用更多的照片,按这类方法。在Retina显示屏下,应用这类方式,不但节省了http的恳求,还让你的编码简约易于维护保养,另外在Retina下也更高效率。

译者手语:第一次汉语翻译前端开发技术性博文,全部汉语翻译按照原文路线开展,并在汉语翻译全过程略加了本人对技术性的了解。假如汉语翻译有不对的地方,还烦请同行业盆友指导。感谢!