前端开发之——网页如何适配Retina屏幕

前言

随着2012年苹果发布第一款Retina Macbook Pro（以下简称RMBP），Retina屏幕开始进入笔记本行业。两年过去了，RMBP的市场占有率越来越高，且获得了一大批设计师朋友的青睐，网站对于Retina屏幕的适配也变成了迫在眉睫的问题。
如果大家对于Retina适配的重要性不是特别清楚，请看我的两个截图：

上图是Google的首页LOGO，我们对比下图SOSO的LOGO：

如果大家还是看不出来，请自行访问这两个网站或者下载附件的截图对比。
说完了重要性，适配Retina的原理又是什么呢？我们知道，当一个图像在标准设备下全屏显示时，一位图像素对应的就是一设备像素，导致一个完全保真的显示，因为一个位置像素不能进一步分裂。而当在Retina屏幕下时，他要放大四倍来保持相同的物理像素的大小，这样就会丢失很多细节，造成失真的情形。换句话说，每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。（摘自《走向视网膜（Retina）的Web时代》）
对此，解决方法相信大家也都听过，就是通过制作两种不同的图形，一张是普通屏幕的图片，另外一种是Retina屏幕的图形，而且Retina屏幕下的图片是普通屏幕的两倍像素。

原理虽然简单，在现实中要实现就不仅仅如此，需综合考虑加载速度，浏览器适配等多方面因素，本文就是教大家如何对Retina的屏幕进行适配。

正文

1.直接加载2倍大小的图片。
假如要显示的图片大小为200px300px，你准备的实际图片大小应该为400px600px，并且使用以下代码控制即可：

![](pic.png)

这种方法就解决了Retina显示不清楚的问题，但是在普通屏幕下，这种图片要经过浏览器的压缩，在IE6和IE7上有十分差得显示效果，同时，两倍大小的图片势必会导致页面加载时间加长，用户体验下降，此时，我们可以通过Retina.js（http://retinajs.com/）文件解决：

![](pic.png)

2.Image-set控制
假如要显示的图片大小为200px300px，你准备的图片应有两张：一张大小为200px300px，命名为pic.png；另一张大小为400px*600px，命名为[email protected]（@2x是Retina图标的标准命名方式），然后使用以下css代码控制：

#logo {
background: url(pic.png) 0 0 no-repeat;
background-image: -webkit-image-set(url(pic.png) 1x, url([email protected]) 2x);
background-image: -moz-image-set(url(pic.png) 1x,url(images/[email protected]) 2x);
background-image: -ms-image-set(url(pic.png) 1x,url(images/[email protected]) 2x);
background-image: -o-image-set(url(url(pic.png) 1x,url(images/[email protected]) 2x);
}
或者使用HTML代码控制亦可：
![](pic.png)

3.使用@media控制
实际是判断屏幕的像素比来取舍是否显示高分辨率图像，代码如下：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5), /* 注意这里的写法比较特殊 */
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {
            #logo {
            background-image: url([email protected]);
            background-size: 100px auto;
            }
}

使用这个的确定就是IE6、7、8不支持@media，所以无效。但是如果你只是支持苹果的RMBP的话，不存在兼容问题，因为MacOS X上压根没有IE！哈哈哈！

本文摘自JsonChen的博客，原文链接：http://www.ui.cn/detail/24556.html