分辨率
作为一个UI入门学习者，真的是看着px、pt、ppi、dpi和无数种屏幕尺寸想撞墙，然而这个拦路虎是躲不开的，只能一篇篇文章去看，老师说的内容一遍遍听，直到稍微不那么迷茫了为止，也希望我的分享能帮到看文的你。
在了解分辨率之前，我们需要知道UI设计相关的几个单位名词定义：
Px：
屏幕最小单位，pixel，也称为像素，像素和我们平常说的英寸厘米这些单位不同，他是没有固定大小的，一平方米的面积上可以放一千个像素也可以放一万个像素，我们只需要记住像素是个有弹性的、最小的单位就可以；
PPI：
Pixel per inches，每英寸像素数，一般我们说手机是3.5英寸、4.7英寸，这个数字指的就是手机屏幕的对角线长度，而ppi=对角线上的像素数/对角线长度，对角线上的像素数请自行复习勾股定理计算；
Pt：
自从iPhone4开始使用Retina屏（视网膜屏）开始，同样尺寸的手机屏幕就能容纳更多的像素了，原来一部3.5英寸的手机屏幕像素可能只有100*100px，可现在有了Retina屏以后就变成了200*200px，甚至更多。
那么一个50*50px的图标在这两个不同的分辨率的手机里大小就不一样了，在前一部手机里它的大小为屏幕的1/4，后一部里就变成了1/16，可是手机的物理尺寸即英寸大小没有变，那么这个图标在Retina屏里看起来就会特别小，可是市场上的手机屏幕分辨率没有一千，也有八百，总不能做一个图标，要给每个分辨率都设计一个版本吧，设计师可以累死了。
于是，苹果就自己定义了一个单位Pt，用来给设计师做基础设计，然后再根据公式变换成px以适应不同分辨率的手机。
Pt对于UI设计师来说就是苹果自定义的设计单位，不是打印的那个pt，不是point啊，不是1/72英寸！（坑爹苹果就不能取个别个名字吗）
Pt 怎么换算成px呢？
一个最简单的方法，pt=（ppi/163）*px，ppi不一定刚好能除尽163，我们就用四舍五入，如果ppi是350，那么pt=2.14px，就是说1pt约等于2px。
那163哪来的呢？
来自我们还不需要计算pt这个坑爹玩意的iPhone3G时代，iPhone3G的3.5英寸屏幕的像素是320*480，它的ppi=163，苹果就规定了在ppi=163的时候，1pt=1px。
结果苹果iPhone4G来了个大跃进，搞了个Retina屏，还是3.5英寸的手机，屏幕像素变成了640*960，它的ppi=329，所以这时候1pt=2px。
Dp：和iOS的pt一样，安卓为了设计而创造的独立单位，1dp=（ppi/160）px。
倍率
感觉基础定义已经说的差不多了啊，可能看到这的时候各位初学者还是和我当初一样迷茫，我算这些，干嘛呢？
当我们在sketch里做图的时候，我们会发现sketch里就给我们配好了iPhone6，7，8的尺寸，只要选择就可以直接做，但仔细一看会发现，他给的iPhone6像素是375*667pt，可人家手机的实际尺寸是750*1334px，1pt=2px，所以我们在做完设计稿导出的时候就要用@2x的倍率导出，这样才是和实际大小差不多的设计。
可是你可能会指着上面的两个像素说这不是很容易就看出来是两倍的关系了吗，还需要那么麻烦的计算公式吗？
too young too simple，请去看看市面上有多少千奇百怪的屏幕像素吧，好像有一万多种，到时候会算都算不错了。
来源：酸梅干超人&UI中国文章
时长：30个番茄
685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
