UI尺寸知识汇总

对于UI尺寸这方面的知识一直模模糊糊的,对分辨率、ppi、dpi、pt、px 等傻傻分不清楚,今日特此总结。

单位

  • px
    pixel 像素,屏幕上的最小发光单位。

  • pt
    point 一个标准的长度单位,1pt=1/72 inch。在ios中以普通屏为基准,1pt = 1px。

  • dp
    device independent pixels 设备独立像素,android专用长度单位,以160ppi屏幕为标准,则1dp=1px,即
    1dp = PPI/160*1px (大写单词表示变量,小写单词表示单位)

  • sp
    scaled pixels 放大像素,android专用字体单位,以160ppi屏幕为标准,字体大小为100%时,则1sp = 1px。

  • dpi
    dot per inch 每英寸有多少个点。
    dpi最初用于衡量打印物上每英寸的点数密度。dpi值越高图片越精细。当dpi的概念应用在计算机屏幕上时,就称之为ppi。
    同理,ppi就是计算机屏幕上每英寸可以显示的像素点的数量。因此在电子屏幕中dpi = ppi 。

iPhone尺寸规格

iPhone尺寸规格.png

下面将以这张图为例进行讲解。

概念

  • 英寸(inch)
    1 inch = 2.54cm = 25.4mm

  • 屏幕尺寸
    即屏幕的对角线长度。以iPhone 6 为例,屏幕尺寸等于屏幕对角线的长度4.7英寸

    屏幕尺寸.png
  • 像素/像素点(pixel)
    屏幕的最小发光单位。缩写为px

  • 设备分辨率
    屏幕上像素点的数量。以iPhone 6 为例,设备分辨率为750*1334,即横向最多可划分为750个像素点,纵向最多可划分为1334个像素点。

设备分辨率.png
  • 像素密度(PPI)

    • 版本一
      Pixel Per Inch by diagonal : 沿着对角线,每英寸所拥有的像素点数
      量。
      以iphone 6 为例,ppi是326,根据勾股定理,由以下公式计算可得结果为325.6122832234,和结果有些误差。
    Paste_Image.png
    • 版本二

    ppi 或 PPI (Pixels Per Inch),像素密度(pixel density)单位,即每英寸的长度中所具有的像素。由分辨率中X或Y轴的数字除以该轴的长度(英寸),可得该轴的像素每英寸密度。一般的像素是方形或接近方形,X与Y轴像素密度相同,但也有不相同的显示器。维基百科

像素密度.png

注释:X是水平像素分辨率,x是屏幕物理宽度;
Y是竖直像素分辨率,y是屏幕物理高度

个人思考

实际版本二才是正确的定义和计算方法,那为什么会出现版本一呢?
已知条件是屏幕分辨率屏幕尺寸,版本二中的公式需要宽度和高度,而已知的屏幕尺寸是屏幕对角线的长度,所以推导出以下公式,继而推导出版本一中的计算方式。
(X/x)²=(Y/y)² = (X²+Y²)/(x²+y²)= (X²+Y²)/(c²)
c代表屏幕尺寸,即对角线长度。

实际上在正方形中

  • 缩放因子(scale)

    • 起源
      早期的iPhone 3GS的屏幕分辨率是320*480,IOS绘制图形以point为单位,
      1 point = 1 pixel
      后来在iphone中,同样大小(3.5inch)的屏幕采用了Retina显示屏,横,纵向的像素密度被放大到两倍,
      设备分辨率提高到(320×2)×(480×2)=640×960,显像分辨率提升至iPhone 3GS的4倍(一个Point被渲染成一个2×2的像素矩阵)。
      1 point = SCALE × 1 pixel (在iPhone 4~6中,缩放因子scale=2;在iphone 6+ 中,缩放因子scale = 3)
  • 逻辑分辨率
    逻辑分辨率的基本单位是point,设备分辨率的基本单位是pixel。
    不同的屏幕具有不同的缩放因子,逻辑分辨率 = 设备分辨率 / 缩放因子

  • @2x/@3x 高倍图
    由于缩放因子的存在,在制作图标时,针对不同分辨率的屏幕要提供不同倍率的图标。
    在iphone 3GS中,scale =1 ,用的图标是50×50pixel(logicalimage.size=50×50point)
    在iphone 4~6 中,scale =2 ,用的图标是100×100pixel(logicalimage.size=50×50point)
    在iphone 6+ 中,scale =3 ,用的图标是150×150pixel(logicalimage.size=50×50point)

    • 关于6+的设备分辨率
      为什么要写成(1242×2208->)1080×1920。
      我们可以观察到,scale和PPI是正相关的,而401/326*2 ≈ 2.46 ,即在iphone 6plus上,缩放因子应该是
      @2.46,但是对于开发者很不方便,所以取为@3x,而最后iphone会自动缩放到@2.46。

参考

简书-星空下的菜地-iPhone屏幕尺寸、分辨率及适配
脚本之家在线工具-UI尺寸规范
screensiz
SNOW-八一八那些px、pt、ppi、dpi、dp、sp之间的关系
移动端尺寸基础知识

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

推荐阅读更多精彩内容