移动设备适配基础知识速成

我们都知道现在移动设备屏幕尺寸非常多，不同的屏幕尺寸又分裂出很多的屏幕分辨率，以手机为例iphone和android的屏幕分辨率就有：480×800、480×854、540×960、640×960、640×1136、720×1280、750×1334、1080×1920、1242×2208和越来越流行的2K屏。这里面还不包括安卓设备各种奇葩的屏幕分辨率，还有什么dpi、ppi、pt、dp、sp等等各种单位，以及复杂的计算公式，对于刚接触移动端设计的设计师来说，早就被搞的晕头转向。而实际上看似复杂的东西当你掌握了规律以后，你会发现原来是这么的简单。

1、像素密度
         我们的显示屏幕都是由像素点组成的，比如说一块分辨率为480x800的屏幕，它是由480x800个像素点组成。在两块屏幕尺寸不同但分辨率一样的情况下，尺寸更小的屏幕显示效果会更为精细，因为它在更小的尺寸里面容纳了更多的像素点，这就是我们说的像素密度。

        像素密度（Pixels per inch）简称ppi，是指屏幕对角线每英寸长度上排列的像素点数量。像素密度越高则屏幕显示也 越 精细。屏幕对角线长度我们用英寸表示，比如说一块5英寸的屏幕，指的就是屏幕对角线长度为5英寸。

ppi也有人叫dpi，dpi是指打印分辨率，用在屏幕上和ppi是同一个意思。

2、移动端的虚拟单位pt和dp
        iphone和android第一台手机都是直接用px作为尺寸单位开发的。因为只有一台手机，所以用px做尺寸单位完全没有问题，但是随着手机屏幕的发展，问题出现了。从上面的像素密度我们知道了，密度越高显示的越精细。如果两个同样尺寸的屏幕，分辨率一个高一个低，也就是像素密度不一样。我们还是用px来做单位的话，无法在两个屏幕上完美显示。所以需要在px和像素密度中间架一座桥梁，让应用能适应不同大小的屏幕。

 

        举个简单的例子iphone3和4s，屏幕尺寸一样，但是分辨率充320x480px翻倍到了640x960px（ retina屏 ），这相当于像素密度提高了一倍。如果用px做单位，那为iphone3开发的应用在4s上只有四分之一大小（宽高都减半）。但实际上我们在使用的时候两者的显示的效果却是一样的，只是4s比3更为精细。这是因为iphone4s上采用了新的虚拟单位pt，1pt=2px。开发者不需要做什么大改变，只需要把单位从px改为pt，就完美的解决了这个问题。

 

         android也同样引入了新的虚拟单位，叫dp，虽然和ios的叫法不一样但本质是一样的，所以ios的pt和 android的dp就是px和像素密度之间的桥梁。   

3、像素和虚拟单位的倍数关系    

        我们在上面知道了屏幕的像素密度，知道了ios和android的虚拟单位，那现在就可以愉快的换算了。有人肯定会说，你根本都没说怎么换算啊。。。怎么就简单了，完全不知道你在说什么。别着急，我们继续往下看：

 

        我们先看上面一张图表，可以看到现在屏幕按密度分为6种，每个密度都有相对应的密度值和分辨率， ios和Android系统已经把屏幕密度划分好了，会根据手机屏幕的分辨率自动划分到相应的屏幕密度里面，我们只需要知道分辨率既可以知道属于那个屏幕密度。

       我们再来看蓝色的 mdpi 中密度一列，在 mdpi  下：1px＝1pt＝1dp。为什么在中密度下1px＝1pt＝1dp？因为iphone和android第一台手机都是直接用px作为开发单位的，之后的设备都是在这个基础上发展起来，所以apple和google定义他们成为标准。其实我们也不必深究为什么，只需知道即可。

       最后我们看一下最下面一行红色的倍率，以 mdpi   中密度的密度值为基数，既可以算出各屏幕密度值的倍率是0.75：1：1.5：2：3：4。根据中密度下：1px＝1pt＝1dp，那即可方便的计算出其它密度下的换算比例，例如在xxhdip下，1pt(dp)=3px。那1080px的宽度就等于360 pt(dp)，给不同范围的屏幕定义不同的倍率，就可以保证显示效果相近。

以下是他们的换算关系：

1倍：1pt=1dp=1px（mdpi、iPhone 3gs）

1.5倍：1pt=1dp=1.5px（hdpi）

2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）

3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）

4倍：1pt=1dp=4px（xxxhdpi）

也就是说，如果你在xxhdpi下做的视觉稿，就除以3换算成虚拟单位给开发同学，在xhdpi下就除以2....，以此类推

       举个例子：有两块同样大小的屏幕，屏幕密度分别是xhdpi和xxhdpi，一根120dp长的线，在xhdpi（720px宽）分辨率下，120x2=240px，占了三分之一的宽度，同样这根120dp长的线，在xxhdpi（1080px宽）的分辨率下也占了三分之一的宽度，因为1080/120x3=3， 将px换算成dp以后，我们设计的应用就能在不同的屏幕上显示一样的效果了。

 

        不过需要注意的是，Android设备的虚拟单位dp通过倍率计算并能做到完全统一。比如两种常见的屏幕hdpi（480×800）和xxhdpi（1080×1920）。除以各自倍率1.5倍和3倍，得到dp值为320×533和360×640。会发现xxhdpi比hdpi更宽更高些，这样也能显示更多内容。所以，设计的时候还需要针对不同的屏幕进行细微的调整。

4、写在最后

        都说应用适配难，实际上只要掌握了倍率，就能在不同大小的屏幕中游刃有余的转换，是不是非常简单。