什么是二倍图？三倍图？

答：

   比如你需要一个30pt*30pt的图标，那么这时你就需要跟美工要3个文件：

1.  一个是30px*30px的PNG文件，用原名来命名即可，例如：sample.png
2. 一个是60px*60px的PNG文件，这个是要用原名@2x来命名，例如：sample@2x.png
3. 一个是90px*90px的PNG图片，这个是要用@3x来命名，例如sample@3x.png

这个把这三张图片导入进工程，你会神奇的发现，这3个文件居然会被ios统一识别为sample.png

@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
    background-image: url($url + "@3x.png")
  }
}
 

应用场景

1x的图标用于1:1的屏幕，非视网膜屏，例如iPhone 3GS,非视网膜的众多iPad等

2x的图标用于1:2的屏幕，大部分视网膜屏，比如：iPhone4S、iPhone5、iPhone5S、iPhone6及后续的视网膜触屏iPad等

3x的图标目前应用于1:3的屏幕，即iPhone 6Plus,这个就比较特殊了， 因为苹果为了方便开发者，想出来一个简单的实现方案，将2208*1242分辨率的图像压缩在1920*1080的屏幕上