mobile相关知识

dpi

[密度单位](dots per inch)打印分辨率 (每英寸所能打印的点数,即打印精度)[主要用于打印设备]

ppi

[密度单位](pixels per inch)[每英寸像素点数]图像分辨率 (在图像中,每英寸所包含的像素数目)

计算方法:

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

# iphone5的ppi计算:
Math.sqrt(Math.pow(1136,2)+Math.pow(640,2))/4=326

# iphone6的ppi计算
Math.sqrt(Math.pow(1334,2)+Math.pow(750,2))/4.7=326

# iphone6+的ppi计算
Math.sqrt(Math.pow(1920,2)+Math.pow(1080,2))/5.5=400

备注

英寸 ppi dpi
iphone6+ retina 1920 x 1080[2208 x 1242]/414 x 736 5.5 @3x 401 154
iphone6 retina 1334 x 750/375 x 667 4.7 @2x 326 163
iphone5 retina 1136 x 640/320 x 568 4 -- -- --
iphone5s retina 1136 x 640 -- -- -- --
iphone5c retina 1136 x 640 -- -- -- --
iphone4 retina 960 x 640/320 x 480 3.5 -- -- --
iphone4s retina 960 x 640 -- -- -- --
iphone1 780 x 320/320 x 480 -- 163 163
iphone2 780 x 320 -- -- --
iphone3 780 x 320 -- -- --
iPad Air/Retina iPad retina 2048 x 1536
iPad 1/iPad 2 1024 x 768

dp

[也叫dip][安卓开发单位],device independent pixels(设备独立像素)

px

[电子屏幕基本单位]主要使用的photoshop或者axure等工具用的度量单位像素,电子屏幕上组成一幅图画或照片的最基本单元。dp与px之间的换算关系[1dp表示在屏幕像素点密度为160ppi时1px长度]

dp*ppi/160 = px
1dp=(屏幕ppi/ 160)px

sp

[安卓字体单位]scaled pixels(放大像素). 主要用于字体显示best for textsize

# 当文字尺寸是“正常”时1sp=1dp,而当文字尺寸是“大”或“超大”时
1sp>1dp

由于做设计时以xhdpi为模板,xhdpi条件下,1dp=2px。若新建画布时,将画布分辨率设为144ppi,则1pt=2px=1dp。此时,即可将pt等同于dp。标注长度的时候,将长度像素除以2即为dp值。

sp与px之间的换算关系

sp*ppi/160 = px

sp和dp代替px[在Android设计原则中,他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行]

pt

[印刷基本单位]是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用

1pt= (DPI / 72) px

eg:当photoshop中新建画布的分辨率为72ppi( 即 72dpi时 ), 1pt=1px; 当新建画布分辨率为72*2=144ppi时,1pt=2px

in

window.devicePixelRatio[设备像素比]=设备物理像素/设备独立像素 我的iPhone是3

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是DPI、PPI? DPI(Dots Per Inch)是测量空间点密度的单位,最初应用于打印技术中,它表示每...
    读品走思阅读 3,765评论 0 5
  • ​初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要...
    有福气的DI雪峰阅读 1,812评论 0 2
  • 以下内容为转载,涉及版权问题请联系原文作者。原文地址>> 不少设计师和工程师都被安卓设备纷繁的屏幕搞得晕头转向,我...
    小矮人Ethan阅读 1,479评论 0 10
  • 本文转载自 http://www.zcool.com.cn/article/ZNjI3NDQ=.html 不少设计...
    蒋扬海阅读 1,543评论 0 11
  • ――第一章―― 天空已被乌云笼罩,像是一座巨大的灰暗的笼子罩在了一望无际的大海上。似乎连海水都透露着...
    异界人阅读 122评论 0 1