Retina对我来说是一个全新的概念。初次接触还不知道是什么意，后来翻译后才知道“视网膜”，在互联网上海量搜索一翻，这是我们前端的一个新知识点——视网膜Web。的确是个NB的新事物，我一开始看简直不知道是什么东西，后来慢慢的看了一些专业术语，结合业务的高人写的博客，总算是对其有一点点的了解。同时把这几天看的东西做了一下学习笔记，希望对一些新接触 Retina的同学有许些的帮助。（因为自己对这一块知道的不多，有可能有写错的地方，希望这些地方不会误人子弟，罪过罪过），更希望有错的地方能得到同行朋友的指正。

最近一直在学习Retina屏幕下图片的处理方法，从《走向视网膜（Retina）的Web时代》一文中知道了Retina这个新名词，同时知道了他是什么东东，同时也继续在探讨Retina方面的知识点，随后在《移动Web——CSS为Retian屏幕替换图片》和《使用css sprites来优化你的网站在Retina屏幕下显示》中学习了Retina屏幕下图片的设置方法，或者说技巧吧，接下来《Web设计师如何制作Retina图像》学习了Retina屏幕下的图片制作技巧。其实可以说，这几篇文章可以让我知道如何在Retina屏幕下处理图片的技巧和细节了。因为这几篇文章从概念到制作Retina屏蔽下的图片，以及Coding实现，可以说是一条龙了。这些都是自以为事，为什么呢？除了这些方法，其实还有更先进的方法，这也就是我接下来要说的事情了。

Sprites熟悉的人较多，在国内有有称之为精灵，也有人称之为雪碧，我个人更喜欢称之为Sprites图像。在一张图上集成了很多个图，然后通过background-position定位，达到背景图显示正确的效果，减少Http的请求个数，从而优化性能。而background-size来说，如果你没有接触过CSS3方面的相关知识，那可能会比较陌生，不知道如何使用，其实很简单，就是通过这个属性来改变背景图片的大小。很神奇吧。那么，为什么 这两个东东就跟Retina屏幕设备扯上了关系呢？要是你有了解过Retina，你就知道是为什么了，要是你从未了解过，也无需担心，继续阅读这篇博文，你就知道为什么了。

Sprites(国内称之为雪碧图)，平常很多时候都是依赖于手工在制作软件中完成，或者依赖于第三方插件自动生成Sprites图。这样虽能实现雪碧图，但在来很多工作量。如果你开始使用Sass或者Compass，你可以发现他们有一个强大的功能，可能使用Sass的mixins自动生成雪碧图。特别是在Retina显屏的时代，使用Sass的mixins生成雪碧更让我们前端人员变得轻松。这篇Evanshajed的《Sass Mixins Icons Sprite with Retina Support》所译，在文章中详细介绍了如何使用Sass的Mixins自动生成普通显屏和Retina显屏的雪碧图。希望这篇文章对大家有所帮助。