美文网首页UI学习
一篇文章帮你理清pt,px, ppi,dpi,dp,sp

一篇文章帮你理清pt,px, ppi,dpi,dp,sp

作者: 陈酿_5f05 | 来源:发表于2020-03-27 23:00 被阅读0次

    作为一个新人,在做移动端UI设计的时候,往往对px,pt,ppi,dpi,dp,sp不是十分清楚,一倍图二倍图三倍图如何换算,导致切图时不知如何导出,本人在学习过程中整理汇总了一些相关知识,并尽量用最简单得语言解释。设计师在设计时可以进行参考。(如发现文中出现错误,请联系我更正)。


    名词解释

        点pt: point,印刷行业常用单位,等于1/72英寸

        像素px:pixel,电子屏幕上影像成像的基本单位。

        长度单位dp: dip,Density-independent pixel, 是安卓开发用的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度

        字体大小sp: scale-independent pixel,安卓开发用的字体大小单位。

        点密度dpi: dot per inch,每英寸多少点,值越高图片越细腻。属于谷歌旗下第一款Android设备为160dpi,规定一倍图为160dpi。   

        像素密度ppi:pixel per inch,每英寸像素数,值越高屏幕越细腻。

    面积相等的区域里,塞进了多少个像素,就代表像素密度有多大,塞进的像素越多即像素密度越大,肉眼所见细腻。如图1个方块代表1个像素,同一个区域里,100X100px的区域塞进去像素更多,显示时也会更清晰细腻。

    3*3px


    100*100PX

    计算公式及关系:

    px与pt:1pt= (DPI / 72) px

    即ps中,当画布分辨率为72时,pt=1px; 当新建画布分辨率为72*2=144ppi时,1pt=2px

    dpi与ppi:安卓1倍图(163dpi)=ios1倍图(160ppi),dpi=ppi

    ppi= \frac{\sqrt{x^2+y^2}}{屏幕尺寸}  注意:当ppi计算出来>=300,肉眼就已经分辨不出其区别。

     以iphone3GS(320*480px/3.5 inch)为例 ,ppi= \frac{\sqrt{320^2+480^2}}{3.5} \approx 164.8为ios1倍图

    接下来,我将用部分主流机型举例:由dpi\approx ppi= \frac{\sqrt{x^2+y^2}}{屏幕尺寸} 得,

    iPhone 8 (750*1334px/4.7inch)\approx 326\approx 163*2     为2倍图

    iPhone xr (828*1792px/6.1inch)\approx 319\approx 163*2    为2倍图

    iPhone xs (1125*2346/5.8inch)\approx 462\approx 163*3     为3倍图

    用这个公式,就可以大致判断每个机型应该是几倍图。其他就不在详细计算了,以1倍的mdpi为基准,像素密度更高或者更低的设备,只需乘以相应的倍率,就能得到与基准倍率相近的显示效果。上图:

    px和dp: 1dp=(屏幕ppi/ 160)px,即1dp定义为屏幕密度值为160ppi时的1px

    以WVGA屏为例,该屏幕为480px*800px,按3.8寸屏算,点密度 √ (480^2 + 800^2) / 3.8 = 245,约等于240,对应于hdpi屏幕,所以该屏幕1dp=1.5px。安卓端屏幕大小各不相同,根据其像素密度,分为以下几种规格:

    1dp定义为屏幕密度值为160ppi时的1px,即在mdpi时,1dp = 1px。 以mdpi为标准,这些屏幕的密度值比为:ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;即,在xhdpi的密度下,1dp=2px;在hdpi情况下,1dp=1.5px。其他类推。

    dp和sp:都是安卓的开发单位,dp是长度单位,sp是字体单位,可根据用户字体大小进行缩放,一般认为1dp=1sp。

    Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等,当文字尺寸是“正常”时1sp=1dp,而当文字尺寸是“大”或“超大”时,1sp>1dp。

    总结:

    1.在画布分辨率=72ppi时,1pt=1px

    2.ppi=dpi,计算公式(√ (屏幕横向像素点x^2 + 屏幕纵向像素点y^2)/屏幕尺寸inch)

    3. 1dp=(屏幕ppi/ 160)px

    4.1dp=1sp

    相关文章

      网友评论

        本文标题:一篇文章帮你理清pt,px, ppi,dpi,dp,sp

        本文链接:https://www.haomeiwen.com/subject/xjsxhhtx.html