自从视网膜屏幕的MacBook Pro发行到现在已经过了很久了，但很多web开发者们还在抓着胸前的键盘，忽视进步，将自己推入一种黑暗的“像素恐惧症”的深渊。

　　像素就是未来，它会不断出现在iPad、MacBook、iPhone或Android手机上。大量照片会向你扑过来，图标会浸透你的灵魂，字体通过屏幕像波尔卡舞的舞者一样给你滴迷魂药。

　　视 网膜屏幕的MacBook Pro目前来说任然算是奢侈品,但我们已经有了快一年的视网膜屏幕iPad， 两年半的iPhone 4。高清晰度显示的广泛使用率已经5倍于“江南style”。然而，要让互联网完全采用适合视网膜屏的图片仍然是有困难的。创业公司们在完全无视视网膜屏 的情况下，苦心设计数月他们的新网站，当人们在视网膜显示屏下看到这个网站时，它就像一个乱七八糟的像素团儿。

　　这是一个实际的、未经修饰的截图:

　　看到了吗?像素无处不在。我甚至看不到网站了：所有我能看到的就是黄色像素，棕色像素，红色像素…

　　有解决办法：

　　这个解决办法很简单，但很少实现：提供高分辨率的设备。

　　有 一些方式可以做到这一点。Apple.com可能在互联网上有两个站点，大多数转移到高分辨率的资源上了，但他们使用了一些janky JavaScript的技术先下载1x图像(正常的分辨率)，派一个请求来测试2x图像(两倍大小)是否存在，如果存在就下载，并从带有2x图像的DOM 里交换1x图像。你的眼睛明显会感觉到像有白内障，因为你在适应模糊形象的一瞬间就转变为一些令人舒服清晰的图像。当然，视网膜设备会产生额外的开销：加 载两种图片和一个额外的请求。

　　最简单的方法就是直接加载2x资源: 

　　<img src="/images/header-500px.png" width="250"/>

　　现 代浏览器对页面资源按比例缩小。这对图像来说是很不错的，比如logo——你想要像素以完美的比例展现较小的尺寸，那么你可以派一个设计师去参与计算所需 要的不同尺度的比例。对于低精度的屏幕你承担额外的带宽开销，但是那能用CSS选择器解决，根据像素密度显示资源。你甚至可以用SCSS或其他前端框架自 动实现。除此之外，探索像SVG和webfonts的矢量技术。创建您自己的图标设置或使用其他工具集，他们能够发挥巨大的作用，使得按钮和导航控件真正 的在高DPI屏幕上流行。你知道这样做需要更长时间吗？或许你认为这很容易，恐怕你只是拿最喜欢的1992年16x16图标来吹嘘成128x128的，这 或许就是你在过去的几十年里所做的吧。高分辨率显示还没有被广泛的使用，但到2013年底，肯定会开始改变。争取在曲线上升开始前行动吧.

　　1x1.GIF

　　还记得ajax,DHTML,以及CSS发布之前的日子吗？我们有5年时光，倍感光荣地使用

　　标签及绝佳的1X1.gif图像，他们确实为我们服务的很好。但接下来的事情就像禅宗花园爆炸了一样，从根本上改变了我们对互联网的整体看法。

　　这 就是我们现在所处的环境。你最好抓紧时间提供一些适合视网膜屏幕的图片，否则你的公司很快就会垮掉，没有人会使用你的产品，你的孩子将会辍学甚至吸毒。不 管你喜不喜欢，他们正在做他们的，孩子们正在用高分辨率的视网膜屏iPad上传自己的照片，这可是去年圣诞节你送给他们的礼物哦。

　　为了保护你的资产，赶紧去更新你的CSS吧！