1ppi等于多少dpi_详解px,dp,pt,sp,ppi,dpi及屏幕适配

在聊天时发现有的小伙伴已经在产品的岗位上工作1~2年了，但对px,bp,dp,pt,ppi等基础知识的理解仍然有不全面的地方，而网上的概念也有多种，因此本文专门举例来详细解读一下基础概念以及屏幕的适配原则。

本文结构如下：

名词解释

px：

像素，构成图片的最小单位，也是设计的最小单位；

像素没有固定的物理长度，例如iPhone3和iphone4的物理尺寸完全一样，但是iPhone3的分辨率为480*320px，而iphone4的分辨率为960*640px。

英寸：

固定的物理长度，1英寸=25.4毫米。

dpi：

屏幕点密度,我们可以将屏幕理解为是由一个又一个点组成的，dpi就是每英寸（长度）所包含点的数目；

dpi我们用的不多，只需了解即可。

ppi：

屏幕像素密度,即每英寸（长度）所包含的像素点数,该值越高，则屏幕越细腻；ppi可以用以下公式计算：

这个公式其实就是运用勾股定理算出手机对角线上有多少像素点，再除以手机对角线的长度，从而得到每英寸长度上所包含的像素点数。

我们用iphone6进行举例：

根据苹果官方数据，iphone6屏幕尺寸为4.7英寸，分辨率为750*1334，PPI为326；

根据上计算公式，将分辨率（px），屏幕尺寸（英寸）带入数据得：

pt：

有两种，第一种是来自于印刷行业，它是绝对长度单位，1pt=1/72英寸，约等于0.35毫米，在Photoshop,word中用于对文字大小进行描述，中文翻译为“磅”。

另一种就是作为IOS开发中的最小开发长度单位，1pt表示屏幕像素点密度为163ppi时，1px的长度；因此pt也有自己固定的物理长度，1pt=1/163 英寸，约等于 0.156毫米。

dp：

安卓开发中的最小长度单位，1dp表示在屏幕像素点密度为160ppi时1px长度。

sp:

安卓的字体单位，和dp类似，表示当屏幕像素密度为160ppi，且字体大小为100%时，1sp=1px。

开发中为什么用pt,dp而不用px？

既然有px，为什么安卓和IOS要自己创建一个单位呢？

前面说过，px没有固定的物理长度，如果用px作为设计单位，那么在屏幕像素密度（ppi）不同的情况下，图片显示的大小是不一样的。

以IOS手机屏为例，以下是两块物理尺寸相同的屏幕，都由10个点（pt）组成，如果我们用像素（px）为单位，那么同样为8*8px的图，在PPI不同的情况下，在两块屏幕上的展示情况如下：

那么问题来了，设计师出图的时候，仍然以px为单位，那么我们该如何保证图片大小一样呢？

1倍图，2倍图，3倍图：

我们不要忘了，设计师在出图的时候，会输出1倍图，2倍图，3倍图；这里的1倍，2倍，3倍就是指屏幕中一个点（pt）中有1个像素，2个像素或3个像素。

接着上图的例子，我们在1pt=1px的时候用1倍图，在1pt=2px的时候用两倍图，这样，在屏幕上显示图片的大小就一致了：

我们该如何判定什么时候用1倍图，什么时候用2倍图呢？

IOS规定屏幕ppi为163时，1pt=1px，此时用1倍图，我们只需要看IOS手机屏幕的ppi和163的比值就行了（ppi的计算公式上面有）

同样的，安卓规定屏幕ppi为160时，1pt=1px，我们只需要看屏幕ppi和160的比值即可，设计师一般会根据其手机像素密度，切5套图（安卓品牌过多，这里不举出具体型号）：

屏幕适配

适配的原因

适配是为了让同一个界面在不同尺寸、不同分辨率的设备上具备相同的显示效。

前文说了，设计师在出图的时候，会根据屏幕ppi不同，已经输出了1倍/2倍/3倍图，为什么还需要适配呢？

我们以iphone5和iphone6举例，iphone5和iphone6的ppi一样，也就是说iphone5和iphone6屏幕上一个点都对应2个像素，而这两种型号也都使用两倍图，因此一个图片在两块手机屏幕上展示出的物理大小也是一样的；但是iphone5和iphone6的屏幕的物理尺寸不同：

iphone5的物理尺寸是4.0寸，iphone6的尺寸为4.7寸，因此还需要进行适配，以此来对屏幕中图像进行调整。

适配原则

适配的原则其实很简单，就一句话：将所有要适配的图放在同一倍率下，组件的尺寸和高度（多数情况）不变，改变组件的间距即可。

刚看到这句话可能会不太明白，我分情况举例来说明：

1.改变间距

这种情况多适用于组件类，比如顶部搜索框，底部菜单栏等；底部菜单内的icon尺寸保持不变，改变icon的间距即可。

2.等比缩放

这种情况多适用于图片，宫格类的元素，根据屏幕尺寸比例，进行等比缩放即可。

全面屏适配

为了追求更高的屏占比，苹果自iphoneX起陆陆续续推出了全面屏，如果我们不进行适配，可能就会出现按钮被iphoneX底部的Home Indicator 遮挡的情况：

全面屏的适配也简单，全面屏和普通屏的区别在于全面屏顶部有刘海，底部有Home Indicator，顶部刘海区高度为44pt，底部Home Indicator高度为34pt，我们只需要在顶部，底部分别预留出44pt、4pt，这样就可以保证页面的内容不会被遮挡。

以上就是关于适配的原则和名词解释，如果有不正确的地方，欢迎指正，共同进步。