现代社会，信息的表现方式越来越多样化，因此UI设计师们的所要面对的情况也将会越来越复杂。
在这种条件下，很多时候我们经常会忘记基本功，这其中分辨率还有设计尺寸的单位便是其中之一。
那么iOS 的 pt、CSS 的 pt、Android 的 dp、ppi、px⋯⋯这些单位和名词的含义到底是什么？我们又该如何使用？
打个比方说，「pt （point，点）」这个单位，不仅出现在 iOS、CSS、还有传统的平面设计也有出现，不过他们三者的意义却是完全不同的；在 Android 系统的设计中我们使用的单位是「dp」，它们不像px 一般容易理解，而且通过我的观察，很多人在学习UI设计时候都会卡在那个地方。
大部分人在碰到这种困难的时候都会直接当作没有这回事，继续使用px，但如果继续这样下去，就会出现很多的问题，比如：
1.设计师按照小屏幕的机型来设计，但工程师却拿一部大手机问：「那这要怎么办？」
2.明明一开始就是照着设计来做，但是一放到手机上，字的大小就会出现偏差了。
个人以为如果想把理论知识熟练的运用到工作当中，只靠死记硬背公式是不明智的，但如今网络中大部分文章都只是把公式告诉大家，并没有对读者进行解释，不过当代社会的教育方法从小就让我们养成了看书找公式背公式的习惯。
库克：为了进一步与任天堂加深合作关系，苹果再一次重新发明了手机。
（此刻该有掌声、欢呼声尖叫声！）
这款手机的屏幕长宽都是 1 英吋、长宽各排列了 10 颗像素，显而易见的是如果我们想描述它的屏幕有多细致的话，可以这样说：它的屏幕的像素密度是每英吋 10 pixel，换言之，iPhone Inch 的分辨率是 10 ppi。
可能又有人想问ppi 这是什么单位？它的意思就是「Pixels Per Inch，每英吋包含几颗像素点（像素密度）」。
后来由于市场反应良好（总之苹果出什么大家买就对了）；第二年苹果，又推出了 s 升级版—— iPhone Inch s：
库克：这是我们有史以来最好的手机，Amazing！
接着播放产品介绍影片。
这是我们史上最好的屏幕，像素点的密度提升到先前的两倍，只要你目洨，它就是视网膜屏幕，让你分辨不出像素点，官方售价只要 $9999！
现在它的长宽像素点都提升为原来的两倍达到了 20×20 pixel，按照惯例我们就可以说这块屏幕分辨率就是 20 ppi。
现在打击都知道如何计算了吧，让我们暂且搁下上面的方块手机，回到昔日荣光 iPhone 7，拿尺来测量看看：
iPhone 7 屏幕的宽度是 2.3 吋，横向共排列了 750 颗 pixel，那么也就是，每英吋包含了 750/2.3 ≈ 326 颗 pixel，因此我们会知道iPhone 7 的分辨率是 326 ppi。
换算公式：
△ 分辨率关系式
在我们清楚了解了什么是分辨率之后，就来看看绘图吧。
iOS 的 pt 单位
我们先来继续之前的故事，因为新手机的发明，苹果公司的设计师和工程师可惨了，新手机便需要新的APP，于是PM给工程师们准备了两代机种给工程师测试：
工程师：你准备在画面上放些什么呢？美工。
设计师：我。。。不是美工
工程师：分辨率都不懂，好意思称自己设计师？！
。。。
（哈哈这工程师一定南部来的。）
设计师：我要在画面上放一条灰色的分隔线
工程师：粗细呢？
设计师：1 px。
工程师：还说你不是美工！你看这是什么？
（零基础UI设计小白想系统学习ui设计课程的可以加我的学习群661690541每天都有免费公开课哦）
为什么两台手机的呈现的画面不一样呢？
原来，当其中一个屏幕分辨率（像素密度）越高的时候，像素点就会越密集、越小颗，因此我们使用 px 当单位来做 UI 的话，就会发生不同分辨率的屏幕呈现不同的状况，所以该怎么解决呢？
从左到右，分别是 iPhone一代、iPhone 4，和 iPhone 6 Plus
自从苹果公司推出第一代 iPhone到现在的 iPhone 7，屏幕的「像素密度」共有两次大变化（注意是密度变化喔！），第一次是在设计 iPhone 4 的时候，它的屏幕尺寸保持不变，不过像素密度却变成原来的两倍，达到了 326 ppi，贾伯斯称它是：视网膜屏幕（Retina Display）。
而第二次是设计 iPhone 6时，同时还有大尺寸的 iPhone 6 Plus，Plus 不只是个头大，而且像素密度还变成了三倍，截至目前苹果所有的产品里，只有 iPhone 6/7 Plus 拥有三倍密度的屏幕。
总之 ，记住，iPhone 6/7 Plus 是目前拥有三倍密度屏幕的机种。
后来工程师在第一个屏幕上放了一颗 1 px 的小红点，并把这个点拿到右边的新机上，虽然大小不变，但长宽变成了 2px，因此如果以后用「pt」来当大小单位的话，就不用再管那个变来变去的 px 了。
在 IOS 系统的世界也是这么运作的，当我们在初代 iPhone 上标出一颗红色的 pixel后，再说它的长度（或宽度）叫做「1 pt」，将这颗红色的点再放到有视网膜屏幕、密度两倍的 iPhone 4 上之后，那么它的长度便会掩盖了视网膜屏幕上的 2px；如果在拿到三倍密度的 Plus 上面呢，请大家猜猜这个小红点的长度会涵盖几 px？
如果你知道为什么是 3px，那么就恭喜你，说明真的完全弄懂了背后的机制。
,
