DPI、PPI、DP、PX 的详细计算方法及算法来源是什么?

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:bigyang
链接:http://www.zhihu.com/question/21220154/answer/18584739
来源:知乎

1. dpi是dot per inch,每英寸多少点,ppi是 Pixel per inch,每英寸像素数,针对显示器的设计时,dpi=ppi。
ppi计算方法是长宽各自平方之和开方,除以对角线长度(单位英寸)。原理可以自己画个矩形勾股定理算一算。
2. ppi表示显示设备的点密度,dpi表示印刷品点密度。
3. dip或dp,是安卓开发用的单位,1dp表示在屏幕点密度为160ppi时1px长度。
因为安卓设备屏幕众多不可能为每个屏幕单独开发,所以用公式 px=dp*(ppi/160)计算在不同屏幕上的像素数。
举例:HVGA屏320*480,一般是3.5寸,计算点密度为√ (320^2 + 480^2) / 3.5 = 164,约等于160,1pd=1px
WVGA屏480*800,按3.8寸屏算,点密度 √ (480^2 + 800^2) / 3.8 = 245,约等于240,1dp=1.5px。
还有更高分辨率的屏幕就不一一列举了,总之dp是为了方便适配不同屏幕的单位,在不同屏幕密度下,1dp的物理长度也相同。

---------------------------------------------------------------------------
2014-2-28修改,上面看不明白的可以从这里开始看

<img src="https://i-blog.csdnimg.cn/blog_migrate/22ae4287e2260883a779bb40677931f6.png" data-rawwidth="450" data-rawheight="353" class="origin_image zh-lightbox-thumb" width="450" data-original="https://pic2.zhimg.com/cc81dd9baee5f14b570665825906cc99_r.jpg">

液晶屏显示图像,放大来看是一个个小点组成的,这些小点就是像素点(px)。

有的手机屏幕小像素点少,比如HTC G11的4寸480x800屏幕,还有的屏幕大像素点多,比如三星note2的5.5寸720x1280屏幕。

<img src="https://i-blog.csdnimg.cn/blog_migrate/506b72d09aee7432b06512d3f2fda99e.png" data-rawwidth="605" data-rawheight="353" class="origin_image zh-lightbox-thumb" width="605" data-original="https://pic4.zhimg.com/c6dd325f840c836b1f3418a3830f106f_r.jpg">

这个图标在不同的手机屏幕上显示出来,就是上图的效果。可以想象一下我们不同的手机打开同一个应用,按钮的尺寸相差很大。

图片显示大小是由什么决定的呢,屏幕尺寸?上图第1和第2个屏都是4.3英寸。像素数?第2和第3个屏都是720x1280的像素。最后我们找到了点密度(density),也就是像素数和屏幕尺寸的比值。density是每单位长度容纳的像素数量,一般用像素/英寸,也就是Pixel per inch(ppi)。

屏幕的尺寸是屏幕对角线的长度,计算对角线像素数量再除以屏幕尺寸就得到了ppi值。上面3个屏的点密度分别是217ppi,327ppi(经评论提醒,应该是342ppi),267ppi。

对比上图可以知道,ppi越低图片显示的越大,ppi越高图片显示的越小。

要让不同屏幕显示图片的大小相同,就需要对图片进行缩放,给高ppi屏提供更大的图片。

<img src="https://i-blog.csdnimg.cn/blog_migrate/e8d304c99c447e9e3722764d6e269d55.png" data-rawwidth="624" data-rawheight="450" class="origin_image zh-lightbox-thumb" width="624" data-original="https://pic3.zhimg.com/8bfb234deb18787ef339ed490be1ab3a_r.jpg">

高ppi屏幕需要更大的图片才能得到同样的显示效果,反之亦然。ppi和图片px的关系如下

px1/px2=ppi1/ppi2

选定一个ppi值作为基础绘制图片,用ppi的比值计算出图片缩放比例就可以适配各种屏幕

px2=px1*(ppi2/ppi1)

安卓选定的这个基础值就是160ppi

px2=px1*(ppi2/160)

我们已经解决了图片放大缩小的问题,还需要一个单位用来描述长度(因为px不固定,inch不方便)。安卓创造了一个新的单位dp,中文名设备独立像素。并且规定在160ppi的屏幕上,1dp=1px。

设计师只需要针对160ppi的显示屏设计并制图,安卓会根据当前手机屏幕的ppi值来放大缩小图片,在不同的屏幕上得到相近的显示效果。

<img src="https://i-blog.csdnimg.cn/blog_migrate/b4aa8a694ae9fa067e34a39e07d56b35.png" data-rawwidth="243" data-rawheight="158" class="content_image" width="243">
------------------------------------------------------------
2014-2-12修改,补充部分关于SP单位的内容

安卓设备的文字单位是sp,简单理解和DP是相同的。

下面这段是从Android Design上抄的:

使用不同大小字体对比,可以创建有序的,易理解的布局。然而,在相同的用户界面有太多

不同大小的字体,会很乱。Android 框架使用以下的大小:

<img src="https://i-blog.csdnimg.cn/blog_migrate/04ff4b5c2d482f5f47d8e5f254c23874.png" data-rawwidth="426" data-rawheight="182" class="origin_image zh-lightbox-thumb" width="426" data-original="https://pic3.zhimg.com/3621f86e65fbb3f51dacc446b01c6832_r.jpg">

对应到App中:

<img src="https://i-blog.csdnimg.cn/blog_migrate/aede3f7f6f06ff0a905ffa2694c1cc2c.png" data-rawwidth="360" data-rawheight="462" class="content_image" width="360">上面这张知乎截图(简单处理过),红字标明了对应的各种文字类型。上面这张知乎截图(简单处理过),红字标明了对应的各种文字类型。

实际使用中没有那么绝对。中文App,中号16SP文字过大,正文也常用小号14SP的。超小号12SP也不够小,例如知乎就用了更小的字号。

PS设计时,针对对应的标准(HDPI,XHDPI,XXHDPI),使用不同的px。

<img src="https://i-blog.csdnimg.cn/blog_migrate/085f0d94394c1a4c723dbbe92c06a659.png" data-rawwidth="445" data-rawheight="226" class="origin_image zh-lightbox-thumb" width="445" data-original="https://pic4.zhimg.com/ceaf93d22bd9ad83df43da6bbc1c48a3_r.jpg">


原文地址:http://www.zhihu.com/question/21220154

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值