脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码

  发布时间：2012-12-24 10:20:47   作者：佚名   我要评论
CSS sprites(CSS图片精灵)已经存在很久了。事实上，八年前就有CSS Sprites的详细介绍。CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片,需要的朋友可以详细了解下

特别声明：此篇文章根据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图片。

使用css sprites来优化你的网站在Retina屏幕下显示


复制代码
代码如下:

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 sprite's dimensions back to 1x */
background-size: 200px 200px;
}
}

注：记住上面的这个例子仅适用于Retina屏幕下的设备，目前仅在IOS的移动设备iPhone4s、iPhone5、iPad、iPod和Mackbook Pro。对于Android系统下,要取决于你的系统，采用不同的“min-device-pixel-ratio”。

总结
    不应该将所有的资源引入一个文件中，应该使用CSS sprite 来集成图片。创建@2x的sprites图，这个图刚好是普通图的两倍，而且具有双向扩展在Retina屏幕下，对应的元素上使用相同的Scripts图片使用background-size属性来确保你的@2x Sprites图正确定位

注意，这只是一个简单的例子，里面对三个元素设置了背景图，你可以根据需要在你的站点上使用更多的图片，按这种方式。在Retina屏幕下，使用这种方法，不仅节约了http的请求，还让你的代码简洁易于维护，同时在Retina下也更高效。

译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

相关文章

  • 分享CSS代码写法优化方案

    众所周知,SEO优化很重要的一点就是布局,而DIV+CSS布局优于TABLE,接下来为大家简单介绍一下CSS代码写法优化，对css代码优化相关知识感兴趣的朋友一起学习吧
    2015-12-02

  • 网页头部css代码优化实例

    在div+css布局中，一般都这样来整体构架的： [code] <div id="header"></div> <div id="center"></div> <div id=&quo
    2009-07-11

  • CSS代码优化7个准则

    网页制作Webjx文章简介：整理和优化代码不仅是为了你的CSS文件大小，还包括了维护性和可读性。以上的原理并不只是针对CSS，它们还能应用到HTML，Javascript以及其他编程语
    2009-04-02

  • 智能化CSS检测法，好优化拒绝冗杂代码

    在CSS建站中，无论其代码长度还是文件大小都会影响到网页的正确展示盒速度。那么如何来进行CSS的优化和验证呢？如果你的css水平不能够达到自检的程度，那么今天就和笔者一
    2014-10-11

  • CSS代码是否合理？是否优化？-CSS教程-网页制作-网页教学网

    发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？ CSS
    2008-10-17

  • 详解CSS代码重构与优化之路(经典)

    这篇文章主要介绍了详解CSS代码重构与优化之路(经典) 的相关资料,需要的朋友可以参考下
    2016-01-07

最新评论

关注微信公众号

扫一扫