不就是APP切图适配么，有那么难么？

之前做了一套UI课程经常被学员问切图适配的问题！网上讲这方面的文章很多，但从原理上把这个问题讲清楚的文章却不多，很多人只知道用插件切图，却并不知道为什么那么切，导致换一个设备又不知道怎么做，所以此文会先从原理上来讲清楚这个问题，希望有足够的耐心能看完。

先搞清楚一个概念：屏幕PPI（打印里面的dpi也是一个意思）

ppi（pixels per inch）所表示的是每英寸长度所能够排列的像素（pixel）的数目。PPI数值越高，单位面积的像素数量就越多，显示屏以更高的像素密度显示图像，屏幕就越高清，画面的细节就越丰富。所以，同样的一张图，放到ppi越高（越高清）的屏幕中显示，它会显得越小！

我们知道设计都是用像素做单位，物理设备上尺寸都是用毫米做单位，为了保证触控的区域差不多都是几毫米大，那么更高清的屏幕上的图就得做更大。

iPhone5s和6/7/8虽然屏幕尺寸不一样，但是因为ppi一样，图片显示的也是一样的。我们可以拿iPhone5s和iPhone6/7/8上的应用来对比一下，两者上面图标尺寸都是一样的，只是6/7/8的尺寸变大了，竖向展示的内容更多了，横向空间会自动充满。因此手机适配它不是根据屏幕大小来做的，而是根据屏幕ppi来做的。不管是安卓还是IOS都是根据这个来的，我们理解了这一点，即使现在苹果出了iPhone 11 iPhone X/XS/XR原理上都一样处理！

先理解了这些，我们再来说说手机适配这些事儿了。

 

手机都是触控屏幕，屏幕各不相同，为了使软件元素在不同的手机上面显示尺寸相差不大，就需要几套不同尺寸的图来适配不同的手机屏幕，手机操作系统也不可能每一种屏幕做一种规则，为了保证良好的触控体验并减少程序开发难度，它会根据屏幕PPI划分几个等级：低（120ppi）、中（160ppi）、高（240ppi）和更高（320ppi）超高（480ppi）...然后根据手机屏幕ppi来选择使用哪套切图，如果没有切适配这个屏幕等级的图，则会使用最接近的那套。

 

我们先看下安卓系统的划分：

再来看下苹果手机屏幕规律

不管是安卓还是苹果，这个分级的原理都是一样的。 因为原理都一样，所以切图也是一样的，mpdi，hdpi，xdpi，xxdpi，xxxdpi，他们之间的倍数关系为1x，1.5x，2x，3x，4x，这不就对应上了iso里面常说的几倍图么，ios切的@2x（两倍图），@3x（三倍图）对应的安卓就是xhdpi，xxhdpi啦。讲了这么多终于把两个长期敌对的阵营建立到统一战线上了。

我们也可以根据这个分级去判断切几套图适配不同屏幕并推断一下各种其中的尺寸关系。假如做一张48×48px的图适配MDPI，那么其他等级的尺寸分别为：72×72px，96×96px，144×144px，192×192px，如图所示。

这个切图放到安卓APP里面会是这样子，不同的等级放在不同的文件夹里面，每张切图在各个文件夹里面的命名都是一样的，只是图片尺寸不一样。

苹果手机切图理论上也应该是这样子的，但是因为ios系统默认图片都放一个文件夹里面，是在图片后面加@2x、@3x区分的。

因此不管是安卓和苹果，切图的方法是完全一模一样的，只是系统处理的规则有点不一样，一个是通过文件夹区分，一个是通过名称区分。

 

 看到这里很多孩子肯定会吓到了，天啦噜，那不是安卓ios得分别切五套，那还是人干的活嘛？当然没这么吓人，上面只是原理。安卓会切几套因为安卓屏幕千奇百怪，大大小小五花八门，所以会切多套图，目前一般也就切hdpi，xdpi，xxdpi 这几套。实在不知道切几套就跟程序员沟通一下。苹果手机只有ppi为326和401的，所以只需要切两套图就OK了。

 

这里很多人肯定会想，既然就是尺寸不一样，那我们直接切最大尺寸的一套，到低ppi的屏幕上程序直接缩小就行了，这样一套图解决不是省事吗？这样行吗？当然是可以的！而且很多时候也会这么做，但是图片直接缩小可能会发虚，效果会有所打折，为了追求好一点的效果很多还是会切几套图。而切图多了，会导致软件很大，所以目前比较流行的做法是重要的图切几套，不太重要的图就用一种效果也影响不大，这样就可以保证效果不错而软件也不会因为切图太多变得很大。

 

另外一个迷惑无数新手的难题，设计稿该做几套，要不要分苹果和安卓？

 

我们知道适配不是根据手机屏幕大小来分的，是按屏幕ppi去做的，苹果iphone8/7/6/5/4,的ppi为326，常见的分辨率为720*1280安卓手机ppi也很接近320。所以是完全可以用一套设计图去做适配的，安卓设计稿去适配苹果也可以。如果完美主义者可以做一套安卓一套苹果，用一套图适配也问题不大。网上都说用iphone8的尺寸（750*1334）去设计，然后在去做适配方便，其实你用（640*1136）（720*1280）也不是不行。比较推荐iphone8的原因是因为屏幕大小适中，而且如果你是用6的话，设计好的图放到手机上好看效果，当然还有一点后面会讲，但是一定要明白不是一定要用这个哈，只是相对来说方便一点。如果有人跟你说用什么尺寸做才显专业这种话，你就可以用上面这些原理去狠狠打他脸，不用留情面。

 

设计师都是在pc上设计界面的，用的尺寸单位是像素（px），而因为手机屏幕等级不一样，手机系统里面肯定不能用px做单位，不然就得每种屏幕去计算它几毫米大概是几个像素，系统是不会这么傻的，手机系统里面用了新的尺寸单位，安卓里面是dp（也会用sp，也是一样的），ios里面是pt，pt和dp都一样，只是叫法不同而已。

只因为单位不一样，所以需要一个换算规则，因为系统定义了多种屏幕等级ldpi，mpdi，hdpi，xdpi，xxdpi，它们对应的dp到px的系数分别为0.75、1、1.5和2，3，这个系数乘以dp长度就是像素数。

 

从这里我们知道，在320ppi下，1dp/pt=2px，回想到上面讲的，iphone6/5/4 ppi为326，所以你用iphone6的尺寸设计，对应到开发那边要换算成dp或者pt，除以2就行了！我们常说的手机端设计要为偶数，是为了好换算，设计稿尺寸标注如果为像素的话，直接除以2就是开发用的尺寸了，简单省事！

 

讲到这里就更清楚了，不用750*1334的尺寸做也可以，比如用plus的尺寸或者1080*1920做，这套设计稿是针对480dpi的，所以尺寸换算成开发那边就要除以3，除以3肯定没有除以2爽是吧？

 

好了，实在是写累了，具体怎么切图留给下一篇讲吧。

 

补充一点：为啥苹果plus会选择1242*2208这个分辨率，

iPhone手机除了plus那些屏幕ppi是401，用的是@3x的图，其它的4，5，6虽然屏幕尺寸有大有小，但是因为ppi都是326所以都是用的@2x的图。因为iPhone plus的实际DPI是401，理论上苹果应该用401/326 * @2x=@2.46x的切图。但是这个奇葩的比例对开发者而言很难切图。所以苹果为方便开发者用的是@3x的素材，然后再缩放到@2.46x上，大约是2.46/3=83%这个倍数，这样算下来，物理分辨率和虚拟分比率的比例是87%，也就是1920/0.87=2208，1080/0.87=1242，这样的好处就是使开发者更方便，比如准备素材时，字号可以直接调成@3x的。