-
移动设备屏幕适配,字体px pt dp的区别?
网络 2016/4/9 10:44:01我们都知道现在移动设备屏幕尺寸非常多,不同的屏幕尺寸又分裂出很多的屏幕分辨率,以手机为例iphone和android的屏幕分辨率就有:480×800、480×854、540×960、640×960、640×1136、720×1280、750×1334、1080×1920、1242×2208和越来越流行的2K屏。这里面还不包括安卓设备各种奇葩的屏幕分辨率,还有什么dpi、ppi、pt、dp、sp等等各种单位,以及复杂的计算公式,对于刚接触移动端设计的设计师来说,早就被搞的晕头转向。而实际上看似复杂的东西当你掌握了规律以后,你会发现原来是这么的简单。
1、像素密度
我们的显示屏幕都是由像素点组成的,比如说一块分辨率为480x800的屏幕,它是由480x800个像素点组成。在两块屏幕尺寸不同但分辨率一样的情况下,尺寸更小的屏幕显示效果会更为精细,因为它在更小的尺寸里面容纳了更多的像素点,这就是我们说的像素密度。像素密度(Pixels per inch)简称ppi,是指屏幕对角线每英寸长度上排列的像素点数量。像素密度越高则屏幕显示也越精细。屏幕对角线长度我们用英寸表示,比如说一块5英寸的屏幕,指的就是屏幕对角线长度为5英寸。
ppi也有人叫dpi,dpi是指打印分辨率,用在屏幕上和ppi是同一个意思。
2、移动端的虚拟单位pt和dp
iphone和android第一台手机都是直接用px作为尺寸单位开发的。因为只有一台手机,所以用px做尺寸单位完全没有问题,但是随着手机屏幕的发展,问题出现了。从上面的像素密度我们知道了,密度越高显示的越精细。如果两个同样尺寸的屏幕,分辨率一个高一个低,也就是像素密度不一样。我们还是用px来做单位的话,无法在两个屏幕上完美显示。所以需要在px和像素密度中间架一座桥梁,让应用能适应不同大小的屏幕。
举个简单的例子iphone3和4s,屏幕尺寸一样,但是分辨率充320x480px翻倍到了640x960px(retina屏),这相当于像素密度提高了一倍。如果用px做单位,那为iphone3开发的应用在4s上只有四分之一大小(宽高都减半)。但实际上我们在使用的时候两者的显示的效果却是一样的,只是4s比3更为精细。这是因为iphone4s上采用了新的虚拟单位pt,1pt=2px。开发者不需要做什么大改变,只需要把单位从px改为pt,就完美的解决了这个问题。
android也同样引入了新的虚拟单位,叫dp,虽然和ios的叫法不一样但本质是一样的,所以ios的pt和android的dp就是px和像素密度之间的桥梁。
3、像素和虚拟单位的倍数关系我们在上面知道了屏幕的像素密度,知道了ios和android的虚拟单位,那现在就可以愉快的换算了。有人肯定会说,你根本都没说怎么换算啊。。。怎么就简单了,完全不知道你在说什么。别着急,我们继续往下看:
我们先看上面一张图表,可以看到现在屏幕按密度分为6种,每个密度都有相对应的密度值和分辨率, ios和Android系统已经把屏幕密度划分好了,会根据手机屏幕的分辨率自动划分到相应的屏幕密度里面,我们只需要知道分辨率既可以知道属于那个屏幕密度。
我们再来看蓝色的 mdpi 中密度一列,在mdpi 下:1px=1pt=1dp。为什么在中密度下1px=1pt=1dp?因为iphone和android第一台手机都是直接用px作为开发单位的,之后的设备都是在这个基础上发展起来,所以apple和google定义他们成为标准。其实我们也不必深究为什么,只需知道即可。
最后我们看一下最下面一行红色的倍率,以mdpi 中密度的密度值为基数,既可以算出各屏幕密度值的倍率是0.75:1:1.5:2:3:4。根据中密度下:1px=1pt=1dp,那即可方便的计算出其它密度下的换算比例,例如在xxhdip下,1pt(dp)=3px。那1080px的宽度就等于360 pt(dp),给不同范围的屏幕定义不同的倍率,就可以保证显示效果相近。
以下是他们的换算关系:
1倍:1pt=1dp=1px(mdpi、iPhone 3gs)
1.5倍:1pt=1dp=1.5px(hdpi)
2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)
3倍:1pt=1dp=3px(xxhdpi、iPhone 6 plus)
4倍:1pt=1dp=4px(xxxhdpi)
也就是说,如果你在xxhdpi下做的视觉稿,就除以3换算成虚拟单位给开发同学,在xhdpi下就除以2....,以此类推举个例子:有两块同样大小的屏幕,屏幕密度分别是xhdpi和xxhdpi,一根120dp长的线,在xhdpi(720px宽)分辨率下,120x2=240px,占了三分之一的宽度,同样这根120dp长的线,在xxhdpi(1080px宽)的分辨率下也占了三分之一的宽度,因为1080/120x3=3, 将px换算成dp以后,我们设计的应用就能在不同的屏幕上显示一样的效果了。
不过需要注意的是,Android设备的虚拟单位dp通过倍率计算并能做到完全统一。比如两种常见的屏幕hdpi(480×800)和xxhdpi(1080×1920)。除以各自倍率1.5倍和3倍,得到dp值为320×533和360×640。会发现xxhdpi比hdpi更宽更高些,这样也能显示更多内容。所以,设计的时候还需要针对不同的屏幕进行细微的调整。
阅读(4816) 分享(0)
◆ 接口限流算法总结