视网膜 Retina的Web页面开发 _像素

【视网膜Retina的Web页面开发】最直截了当的方法就是通过手动制图或以编程的方式制作两种不同的图形，一张是普通屏幕的图片，另外一种是屏幕的图形，而且屏幕下的图片是普通屏幕的两倍像素。看个实例，有一张像素的图片（CSS像素），然后将一个位图的像素上传到你的服务器上，通过CSS样式或HTML属性将其压缩50% ，这个时候，在一个标签分辨率的显示器上，其呈现的图像是位图的四分之一像素。简单点理解，普通屏幕下的图像被压缩，减少像素取样（只是位图含像素的四分之一），这样就造成了资源浪费。同时把这个过程称为＂＂。

文章插图
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; }}
注：记住上面的这个例子仅适用于屏幕下的设备，目前仅在IOS的移动设备、、iPad、iPod和 Pro 。对于系统下,要取决于你的系统，采用不同的“min--pixel-ratio” 。
总结不应该将所有的资源引入一个文件中，应该使用CSS 来集成图片。创建@2x的图，这个图刚好是普通图的两倍，而且具有双向扩展在屏幕下，对应的元素上使用相同的图片使用-size属性来确保你的@2x 图正确定位
注意，这只是一个简单的例子，里面对三个元素设置了背景图，你可以根据需要在你的站点上使用更多的图片，按这种方式。在屏幕下，使用这种方法，不仅节约了http的请求，还让你的代码简洁易于维护，同时在下也更高效。
注明：刚刚发现一个CSS4的属性：image-set也可以用在的网页上，具体可以参考：