Retina适配

Retina适配，就是视网膜屏的适配。在苹果手机上，从iphome4开始就叫视网膜屏。

视网膜屏就是把2像素的缩放到1像素的地方去显示，更加清晰了。从iphome6开始是视网膜屏3倍的，就更加清晰了。

注意：为视网膜屏做适配。需要准备3种尺寸的图片。如：100*100、200*200、300*300的，3种图标都加到一个元素上去。

两种写法：

          1.背景适配   image-set控制   1x表示1倍，2x表示2倍。(效果是1陪的图模糊，2倍的图清晰)

        写法：

                 div{
                              background:url(pic.png) 0 0 no-repeat;
                              background-image:-webkit-image-set(url.png) 1x,url(pic.@2x.png) 2x);
                   }

        例子：

                   div{
                                    width:100px;
                                    height:100px;
                                    background:url(pic.png) left top no-repeat;
                                    background-image:-webkit-image-set(url(img/i1.png) 1x, url(img/i2.png) 2x,
                                     url(img/i3.png) 3x);
        }

        2.HTML中img标签适配

                <img src="pic.png" srcset="pic@2x.png 2x" alt="2倍的一个图片">

        3.在元素内img加max-width

总结：在工作中，比如设计图要求是400*300的。一般会切成400*300，再切一个800*600的两个图，但是其实只要切个中间的数值就可以了，比如只切一个600*400的图就行了。（折中了，不模糊还清晰。）------公司没有特殊要求说需要Retina适配，那就直接正常做，比如就切个400*300的图就可以了。（在苹果手机下可能会稍微模糊也没事）