Retina适配不同分辨率图片

很久以前第一次接触移动端需求的时候，考虑的第一个问题就是：怎样在移动端编写自适应的网页设计？
相信很多人都可以不假思索地脱口而出：利用rem。
当时查阅了一些资料，印象里比较深刻的一段介绍（出自知乎）是：对于不同大小宽度的移动端，就好比一张A4还是A3纸，是A3纸的文字更大一些好呢，还是二者的文字一样大比较好。其实有时候A4或者A3纸文字一样大，体验是更好的，这和利用rem按时两种不同的设计理念。
当时还请教了移动团队的开发同事，得到答复：移动原生的文字大小是和屏幕的分辨率有关的。这和我们网页端的设计理念就不相同了，做前端的都知道，写文字大小的时候基本没有考虑过屏幕的分辨率，而更多的是考虑屏幕的尺寸大小。

------------------------------------------分割线-------------------------------------------------

那么，为什么突然想起这个问题了呢？
是因为在看项目的时候，会经常看到@2x、@3x后缀的图片（淘宝就有大量的这样的图片），经查阅：这是和Retina屏有关。Retina技术就是把多个像素应用到更小的物理屏幕尺寸上，这样屏幕会更加细腻。比如iPhone 4的分辨率是640×960 pixels，但为了保持向下兼容性，采用的是320×480 points。因此在IOS开发时，将图片后缀设置为@2x就会被其自动显示为这个图片。但是在默认的浏览器中无法自动识别，但是高版本的浏览器支持devicePixelRatio属性，比如CSS通过媒体：@media screen and (min-device-pixel-ratio：2)设置不同的图片即可。这个属性现在有了更新的替代方案：

@media screen and (min-resolution: 2dppx)

或者使用image-set方法