• 沙里软件

  • ShaliSoft.com [手机站]   办公桌收纳抽屉
  • 首页
  • 博文
  • 演示
  • 管理
  • 移动设备屏幕适配,字体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更宽更高些,这样也能显示更多内容。所以,设计的时候还需要针对不同的屏幕进行细微的调整。



    阅读(5103) 分享(0)

    上一篇: asp.net中Eval()、Bind()、<%%>、<%=%>比较有什么区别
    下一篇: 怎么做秒杀系统?秒杀系统设计

  • 精彩推荐

    ◆ 服务器iis支持tls1.2,windows server 2008 r2 中IIS启用TLS 1.2(安装SSL后用TLS 1.2)
    ◆ 怎么判断银行卡号格式是否正确?
    ◆ 接口限流算法总结
    ◆ asp.net中Eval()、Bind()、<%%>、<%=%>比较有什么区别
    ◆ ASP.NET 获取上个月当前月的1号和月尾
    ◆ MySQL 百万级分页优化(Mysql千万级分页)
    ◆ FORM提交表单,数据由gb2312传到utf-8 乱码的解决方案.
    ◆ 程序员"偷懒"给软件带来安全隐患
    ◆ 如何防止被人肉?防人肉宝典——平时上网应该注意什么?
    ◆ Python识别网站验证码
  • 用心做事 不能唯利是图

    • 吊儿
    • 用QQ联系我17905772
  • 搜索


  • 最新文章

    • 导出Excel 格式 mso-number-format
    • 服务器iis支持tls1.2,windows server 2008 r2 中IIS启用TLS 1.2(安装SSL后用TLS 1.2)
    • MySQL配置优化
    • EditPlus 添加文件比较工具winmerge
    • 滚动悬浮固定JS特效

  • 热门文章

    • php sso单点登录实现代码
    • 中国菜刀(China chopper) 最新黑客工具
    • redis.conf中文版(基于2.4)
    • 搜索引擎名单大全
    • php图片上传类,支持加水印,生成略缩图

  • 最新图库


  • 最新评论


  • 友情链接

  • 沙里软件

  • 最近访客

    Powered by ShaliSoft.com 豫ICP备13008529号

    免责声明:本站部分内容来源于互联网,转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,不为其版权负责,也不构成任何其他建议。如果发现侵犯版权,联系QQ17905772进行删除。