px 与 dp, sp换算公式

用户头像
上海/UI设计师/9年前/1194浏览
px 与 dp, sp换算公式
用户头像
jolin2012

px 与 dp, sp换算公式

在制作一款汽车多媒体UI,最近关于这几个单位进行了详细分析。

PPI = Pixels per inch,每英寸上的像素数,即 "像素密度"

  • xhdpi: 2.0

  • hdpi: 1.5

  • mdpi: 1.0 (baseline)

  • ldpi: 0.75

我们制作的车机屏幕密度为:184ppi,分辨率为:1280*720


虽然我们制作的PSD文件是1280*720,并且PS里面分辨率设置也是184像素/英寸,但是实际在Android开发转换为dp之后还是有问题。


仔细研究了之后,总结出来一个公式:

n(单位:px)/m(单位:dp)=h(单位:ppi)/160

其中,160是baseline。


那么我们在标注的时候px值并不等于dp值,而是应该按照px值/1.15来标注dp,也就是:

屏幕密度越大dp对应更多的px。(1.15=187/160)


举例:

当屏幕密度为240ppi的时候,h/160=1.5,那么px值就需要是dp的1.5倍,如果我们在160ppi上设计一个32px*32px的icon,那么就需要给现在240ppi的设计48px*48px的icon。

那么我们现在的车机图片需要184/160=1.15,然而我们实际在操作的时候,因为这个数值比较接近于1:1,所以大部分图片还是按照1:1的比例给的,并没有给开发单独输出文件,只有在图片很大影响比较集中的时候,给他们1.5倍大小的图片而已。


另外,不要受PS里面“分辨率:72(像素/英寸)”这样的图像大小描述所影响,其实分辨率是Xpx*Ypx这样的,指的是物理像素,总共的像素点是X*Y这么多个,不会因为PS里面描述的分辨率大就增多像素点;它只是表示出来在你的电脑屏幕上会以什么样的尺寸显示出来,对应的是电脑的屏幕密度。


drawable-ldpi、drawable-mdpi、drawable-hdpi 精度分别为低、中(android默认)、高。

对应的图片大小为:36x36、48x48、72x72。

xxhdpi: 144*144
xhdpi:96*96
hdpi:72*72
mdpi:48*48
ldpi:36*36

 

dp是虚拟像素,在不同的像素密度的设备上会自动适配,比如:
在320x480分辨率,像素密度为160,1dp=1px
在480x800分辨率,像素密度为240,1dp=1.5px
计算公式:1dp*像素密度/160 = 实际像素数

drawable- hdpi、drawable- mdpi、drawable-ldpi的区别:
(1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854)
(2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x480)
(3)drawable-ldpi里面存放低分辨率的图片,如QVGA (240x320)
系统会根据机器的分辨率来分别到这几个文件夹里面去找对应的图片。


 ppi的运算方式是:

PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数

dp:Density-independent pixels,以160PPI屏幕为标准,则1dp=1px,

dp和px的换算公式 :
dp*ppi/160 = px。比如1dp x 320ppi/160 = 2px。

 

sp:Scale-independent pixels,它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为 100%时, 1sp=1px。

sp 与 px 的换算公式:sp*ppi/160 = px

 

总结得出:

px = dp*ppi/160
dp = px / (ppi / 160)

px = sp*ppi/160
sp = px / (ppi / 160)


附上另一本书上关于这个的描述,供参考:


5
举报
|
13
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】秒杀icon
我的钱包-UI界面设计-app
UI通用设计素材1
【新年UI图标】礼物/活动icon
【新年UI图标】体育icon
【新年UI图标】汽车icon
新拟态风格 UI设计组件库
户外旅行飞机情侣假日出行
高级表盘系列UI源文件
UI 登录界面设计模板包
【新年UI图标】钱包icon
【新年UI图标】30个图标
手表表盘UI系列
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
拟物风质感写实UI卡片合集源文件
高级感金属拟物 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】会员icon
Security Camera UI kit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
盲盒APP UI设计
钱包ui模板
科技医疗透明柜UI界面设计
新能源APP应用UIKit
【新年UI图标】旅行icon
你可能喜欢
大家都在看
登录注册