二倍图与三倍图

一看就懂的帖子，讲的还是挺好的

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

• 一个是30px*30px的PNG图片，用原名来命名即可，例如sample.png。
• 一个是60px*60px的PNG图片，这个要用原名@2x来命名，例如[email protected]。
• 一个是90px*90px的PNG图片，这个要用原名@3x来命名，例如[email protected]。

这样把这三张图片导入进工程，你会神奇地发现，这三个文件居然会被iOS统一识别为sample.png，用的时候只需要[UIImage imageNamed:@"sample"]就行了。

---

那么讲一下应用场景：

• 1x的图标用于1:1的屏幕，非视网膜屏，例如iPhone 3GS、（/20140414DEL/ //早期iPhone 4、感谢 @池谷湧 指正）非视网膜屏的众多iPad等。
• 2x的图标用于1:2的屏幕，大部分视网膜屏，机型如（/20140414ADD/ iPhone 4、）iPhone 4S、iPhone 5、iPhone 5s、iPhone 6、iPad with Retina及后续的视网膜屏iPad等。
• 3x的图标目前应用于1:3的屏幕，即iPhone 6Plus，这个就比较特殊了，因为苹果为了方便开发者，想出来一个简便的实现方案，将22081242分辨率的图像压缩输出在19201080的屏幕上。

在使用方法上还是有点懵的，首先要明确的是通常是在一些图标上使用这种方法，而不是遇到img的时候都这样来做

那么问题来了，动态获取的图片，是否需要如是设置二倍图三倍图？

在IOS开发中，以4S为例，开发过程的屏幕宽度是320x480，但是在真机上是实际像素点是640x960，也就是说，如果你要切图，在肉眼看起来的像素为 40x40 , 那么2倍图就是80x80 , 3倍就是120*120 ，

上面的解释很合理，应该就是这样的

还有一点很重要，那就是为啥会有切图，切图：就是不会动态获取的图片，是要写死在代码中的，所以，自己之前的理解一直是错的

也就是说，动态获取到的图片完全不用考虑几倍图的事情，因为是不可控制的，（这里是不是有问题）。但是在一些写死的界面中就要使用到切图。

想通了，就感觉还是很简单的，移动端的魅力就在这，有数不清的细节，遇到了就好好思考，终有一天这些细节都不会再存在了，那时候也就是我去学习原生的时候了。

总觉得我现在研究的这些，应该早就有人写好了，应该有一个完美的移动端的框架，去处理类似的2倍图3倍图，自己摸索的过程，感觉有点傻逼啊，虽然最后自己也能琢磨出来一套完美的移动端的框架，但是不知道是不是很值得。

现在要找找一种sass封装好的方法，直接使用就可以同时加载三张图片，肯定有的，上面一直在说的是ios，是不是可以理解为在安卓上使用到的就是1倍图？为啥之前在看视屏的时候，就没看见过有人去使用1倍图的概念？感觉自己把这些细节都考虑到位了，完全可以自己去做一套视屏了，网上现在做视屏的都是在圈钱，没有一个人在用心的做视屏，等我把这些细节都琢磨好了，自己定要做一套自己满意的视频。目标是搭建一个框架，把移动端会涉及到的知识点，都考虑到，为的是使移动端开发变得简单，（本来就很简单，但是太琐碎了）

还是回到上面三种切图，首先自己完全可以控制台行进行切换，看自己的代码到底加载的是哪种图片

iOS开发中，因为有普通屏和高清屏的原因，所以需要在应用中放置三套图，一套是for普通屏的，另外两套是for高清屏的（高清屏里又有分辨率不同的区别）。for高清屏的命名方式:@2x.png，@3x.png。使用的时候只要使用for普通屏的图片，系统在高清屏时会自动调用for高清屏的图片

上面提到了自动调用，很奇怪，突然感觉自动调用这个词语好高级

自己是不是研究错了？为啥一直在说的都是ios开发？

图文并茂的帖子

如果是按照之前的写法的话，这些问题是需要考虑到的，现在使用的是px2rem，所以问题就不是这样的了，一会在做项目的时候，要注意一下到底通常情况下，是使用2倍图还是3倍图的尺寸。

因为不同的移动设备分辨率不一样，以iphone为例，我们假设你在pc上设置的是原始比例即一倍的显示，iphone6的分辨率要乘以2倍，而6+则要乘以3倍，才能在设备上显示清晰的图片。否则，你用一倍的图片适配所有机型，遇到分辨率大的设备，图片是模糊的

现在用我的理解来说的话，就是使用一张一倍图，假如容器的宽高是300x300 ，图片的宽高也是300x300，这样在普通屏下是正常显示的，但是如果是在高清屏2dpi下，就需要一张600x600的图，所以如果还是使用原来的话，强行将300x300拉升为600x600，肯定会出现模糊的，so，原理就是这样的

很详细的帖子，需要好好看看

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")

这是之前在视频中看到的解决办法，也就是说，默认加载的是2倍图，也就是没有去考虑一倍图的概念了，这应该也是一种折中的解决办法了吧，有一种很好的解决办法，就是多去githulb上去找一下别人的代码，这是很基础的东西，不是很难的。