感谢 apple，带来了 retina 屏幕的革命，让我们可以在电子显示屏上享受到印刷级的分辨率。得益于分辨率的提升，网页中的文字、flash 和 svg 内容显示得比原来更加精细，但网页中的大量使用的位图图片却变得异常模糊，存在严重的分辨率适配问题。2010年6月，iphone4 上市之后，网页图片适配 retina 显示屏的问题就已出现，经过几年发展，配备 retina 屏的电子产品越来越多，如今 apple 又将 retina 技术应用到了 macbook pro 上，网页图片在 retina 显示屏上的适配问题已经变得迫在眉睫。
接下来为大家分享几种适配方案，供大家参考。
1. 标签引用的图片
我们以一张 300*200px 的照片为例：
1
如果想让这张图片在 retina 屏幕下达到应有的显示分辨率，只需使用该照片的源文件导出一张清晰的 600*400px 的图片，我们将其命名为 photo@2x.jpg，替换现有的图片即可：
1
换成 @2x 图片，在 retina 屏幕下的显示就清晰多了，可谓细节毕现。不过在普通屏幕下，图片的显示需要经过浏览器的压缩，一些老版本浏览器如 ie6、7 会显示得非常失真，同时大尺寸的图片会占用更多的带宽，增加页面加载的时间，降低用户体验。通过 js 的辅助，可以让图片在普通屏幕和 retina 屏幕下做到自动适配：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
retina.js 提供了更加完善的解决方案，自动匹配屏幕分辨率的同时，还可以检测服务器上是否存有当前图片的 @2x 版本，以决定是否替换。
优点：
操作简单
普通屏幕下不会加载 @2x 的大尺寸图片，节约带宽
缺点：
retina 屏幕下，标准图片和 @2x 图片都会被加载
图片在显示过程中会被重绘
有些老版本浏览器下存在兼容问题
2. css 背景图片
2.1 meta queries + background-size
我们以一张 logo 的背景图为例，首先我们定义 logo 的尺寸为 100*40px，然后为 #logo 设定一个 100*40px 的背景图片 logo.png，
1
2
3
4
5
#logo {
width: 100px;
height: 40px;
background: url(./logo.png) 0 0 no-repeat;
}
接下来通过 meta queries 判断设备的最小显示像素比，如果大于等于1.5的话，为 #logo 设定一张 200*80px 的背景图片 logo@2x.png，然后通过设置 background-size 让背景图显示为 logo 该有的尺寸。这里的显示像素比我们选择 1.5 作为阈值，是为了适配除苹果以外的高分辨率设备，比如三星的 android pad。
1
2
3
4
5
6
7
8
9
@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(./logo@2x.png);
background-size: 100px auto;
}
}
这样，对于普通的显示设备或是不支持 meta queries 的浏览器，会显示标准的背景图，对于支持 meta queries 的 retina 设备，会显示 @2x 的背景图。（ ie6、7、8 均不支持 meta queries 和 background-size ）
如果仅是为了适配当前的苹果 retina 显示屏，也可以直接判断设备的显示像素比是否等于2：
1
2
3
4
5
6
@media only screen and (-webkit-device-pixel-ratio: 2),
only screen and (-moz-device-pixel-ratio: 2),
only screen and (-o-device-pixel-ratio: 2/1),
only screen and (device-pixel-ratio: 2) {
…
}
优点：
只会加载匹配当前设备的最适图片
跨浏览器兼容
缺点：
如果背景图片很多的话，需要编写非常冗长的代码
2.2 image-set
我们同样以之前的 logo 为例，实现方式如下：
1
2
3
4
#logo {
background: url(./logo.png) 0 0 no-repeat;
background-image: -webkit-image-set(url(./logo.png) 1x, url(./logo@2x.png) 2x);
}
优点：
让图片的链接地址在 css 中更加集中，代码的维护成本降低
可以让浏览器获取多种尺寸的图片文件，根据屏幕分辨率或是其他一些因素选择适当的图片进行展示，在图片的匹配上可以做到更加智能
缺点：
image-set 现在只是 css4 的一个草案，目前只有 webkit 内核的 safari 6+ 和 chrome 21+ 支持该属性
最后的这条缺点很致命，期待 w3c 早日将 image-set 写入标准之中，让更多的浏览器支持这种写法。
3. 使用 svg 可缩放矢量图形
与只能记录像素信息的位图相比，矢量图在不同分辨率下的适配有着先天的优势，目前大多数现代浏览器都已经支持基于 xml 的 svg 格式图形的显示，网页中一些线条简单的 logo 、图标或特殊字形，如果转成矢量的 svg 格式来显示，在 retina 屏下的适配也就搞定了。
制作 svg 格式图片，可以使用 adobe illustrator 或免费的替代软件 inkscape 。
使用 svg 格式图片，可以像我们使用其他格式的图片一样，用 html 的 标签引用，或用 css 的 background-image 、 content:url() 属性，需要注意的是，无论用哪种形式，最好定义一下图片的尺寸。
1
1
2
3
4
5
6
7
8
9
10
11
12
13
/* using background-image */
.image {
background-image: url(https:///wp-content/uploads/2015/08/1a79a4d60de6718e8e5b326e338ae533.svg);
background-size: 300px 200px;
width: 300px;
height: 200px;
}
/* using content:url() */
.image-container:before {
content: url(https:///wp-content/uploads/2015/08/1a79a4d60de6718e8e5b326e338ae533.svg);
/* width and height do not work with content:url() */
}
如果需要兼容 ie6、7、8 或是其他一些不支持 svg 的浏览器，需要额外用到 png 格式的图片副本（关于 png 格式 alpha 通道的兼容问题这里不做讨论）。
3.1 标签引用 svg 格式图片
在 html 的 标签中，增加一个 png 格式图片的自定义属性
1
然后引入 jquery 和 modernizr 判断当前浏览器是否支持 svg ，不支持的话使用 png 替换 svg 。
1
2
3
4
5
6
7
8
$(document).ready(function(){
if(!modernizr.svg) {
var images = $