現代社會，信息的表現方式越來越多樣化，因此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，那麼就恭喜你，說明真的完全弄懂了背後的機制。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!