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

作为一个新人,在做移动端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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,245评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,749评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,960评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,575评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,668评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,670评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,664评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,422评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,864评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,178评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,340评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,015评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,646评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,265评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,494评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,261评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,206评论 2 352

推荐阅读更多精彩内容