屏幕设计常用单位

pt(磅)

  • 计算公式:1 pt(磅)= 1 / 72 inch (1 inch = 2.54 cm)
  • pt(磅)的使用就是为了平面设计师方便控制输出图像的实际大小

dot(点)

  • dot(点)很抽象,指的是采样或输出的最小单位,是一个物理概念
  • 不同的设备里会和不同的具体事物关联起来:打印机的 dot(点)指墨点,扫面仪的 dot(点)指色彩信息,屏幕设备的 dot(点)指一个物理实际像素
  • 屏幕设备里的一个灯点对应设计师图纸里的一个物理像素,这也是设计师使用物理像素为最小单位制图的原因:方便控制细节(例如一个物理像素高度线条在高分屏上代码实现出现小数,用切图控制更好),并且灯点数目是不会受各个平台单位定义方法影响的

pt(逻辑像素)

  • 在非 Retina 设备上,一个 pt(逻辑像素)对应屏幕上的一个灯点(物理像素,设计稿中的基本单位)
  • 在 Retina 2x 设备上,一个 pt(逻辑像素)对应屏幕上的四个灯点
  • 在 Retina 3x 设备上,一个 pt(逻辑像素)对应屏幕上的九个灯点
  • Retina 的本质就是在内容,大小完全不变的情况下加大一个逻辑像素被屏幕显示的灯点数量,从而加强清晰度

dpi(点每英寸)

  • 顾名思义,就是每英寸有多少个采样点的意思,所以 dpi(点每英寸)也叫物理密度
  • 关于 dpi(点每英寸)的误解:dpi(点每英寸)超过 300 肉眼无法识别物理像素只是苹果的营销手段而已(100 米开外的广场屏幕也是无法识别物理像素的)

ppi(系统的像素每英寸)

  • ppi(系统的像素每英寸)是根据最早的时候市面上常见的 dpi(点每英寸)硬性规定一个默认值( Windows 下是 96, 其他系统都是 72 )
  • PS 的 100% 显示的尺寸大小其实就是在规定的 ppi(系统的像素每英寸)下显示的尺寸大小,这个尺寸和真实设备的尺寸是不一致的,说白了,就是像素在 PS 里尺寸很大(以 ppi 显示),到手机上变小了(以 dpi 显示)
  • 目前为止,除了 Windows 系统软件,其他所有涉及图像设备的 ppi(系统的像素每英寸)都遵循苹果公司 1 px = 72 inch 的标准,包括浏览器
  • 实际设备的 dpi 越高于 ppi, 显示尺寸就会越小于真实尺寸
  • 苹果规定 3GS 上 1 pt(逻辑像素)= 1 px, 然后之后的设备 dpi 成倍上升,控制屏幕,使其能较好控制真实的物理尺寸(例如触控范围),不受 ppi 的影响,在系统逻辑像素层,ppi 一直都是 72

px(渲染像素)

  • 所谓渲染像素,即系统处理出来的原始画面的尺寸,即是系统基于 pt(逻辑像素)进行对应倍增而得的结果,这个结果并不一定会等同于实际像素
  • iPhone 6 Plus 采用了 2208 乘以 1242 的逻辑像素,但却因为产能不足把 2208 乘以 1242 的画面塞到 1080P 的屏幕中,导致了 6 Plus 的渲染像素和实际像素不能一一匹配,画面被缩小而模糊
  • iPhone 6 开启 Display Zoom 功能时,逻辑像素与 iPhone 5 相同,即 320 pt 乘以 568 pt,渲染像素进行 @2x 处理,但 iPhone 6 的物理像素为 750 乘以 1334,比此时的渲染像素要高,所以会将画面拉大显示而模糊
  • iPhone 6 Plus 开启 Display Zoom 功能时,逻辑像素与 iPhone 6 相同,即 375 pt 乘以 667 pt,渲染像素进行 @3x 处理,但 iPhone 6 Plus 的物理像素为 1080 乘以 1920,比此时的渲染像素要低,所以会将画面缩小显示而模糊
  • 由此可见,所谓 Display Zoom 技术就是在实际像素和渲染像素处理倍数不变的情况下,改变画面显示的逻辑像素(目前的规律是把逻辑像素向下一个级别),从而达到改变渲染像素的目的,渲染像素一旦被改变,画面就会以不同的大小显示,从而得到不同的视觉效果(目前的视觉效果即是:渲染像素变小,实际像素不变,画面被拉大,所以能显示更多的内容)

dp(设备无关像素)

  • Android 把屏幕密度分为了四个广义的大小:ldpi 240 乘以 320 低 (120 dpi),mdpi 320 乘以 480 中 (160 dpi),hdpi 480 乘以 800 高 (240 dpi),xhdpi 720 乘以 1280 超高 ( 320dpi ),其中 google 规定 160dpi 作为屏幕适配的基准(注意,这里的分辨率为每种广义大小的常见分辨率)
  • 在 160dpi 的机器上 1 dp = 1 px,1 sp = 1 px( Android 允许用户自定义文字尺寸(小,正常,大,超大),当尺存为(正常)时 1 sp = 1 dp = 0.00625 inch,而当文字尺寸是(大)或(超大)时,1 sp > 1 dp = 0.00625 inch,这也是 Google 建议使用sp 作为字体尺寸定义的原因,如果用 dp 控制字体,是不会跟随系统调整变化的)
  • px / dp = dpi / 160(说白了,就是当物理像素密度 160 dpi 时,1 px = 1 dp,可推算出 320 dpi 时,2 px = 1 dp,以此类推)
  • 由此可见,dp(设备无关像素)和 pt(逻辑像素)基本属于同一个玩意儿,dp(设备无关像素)基于 160 dpi 作为基准定位,pt(逻辑像素)基于 iPhone 3G 作为基准定位,iPhone 3G 也正是 160 dpi

rem(相对于根元素的字体大小)

  • Html 的 font-size 可以等比改变所有用了 rem 单位的元素,通过一段 js 根据浏览器当前的分辨率改变 font-size 的值,不管在任何分辨率下,页面的排版都是按照等比例进行切换,并且布局没有乱
  • 值得指出的是 em(相对于父元素的字体大小)已经不太需要了,1 em 就是父元素指定的字号大小
  • PC 上默认的根元素 font-size 所有的浏览器都是 16 px
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,980评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,422评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,130评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,553评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,408评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,326评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,720评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,373评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,678评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,722评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,486评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,335评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,738评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,283评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,692评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,893评论 2 335

推荐阅读更多精彩内容