最近被太多尺寸單位搞得頭昏眼花，還有相同Resolution 不同Screen Size的呈現方式之類，加上自己目前半路出家要惡補東西太多，看完資料後把一些重點摘錄整理在這邊。
Screen Size (螢幕尺寸)
每個螢幕的物理尺寸有自己的長寬，通常用對角線來定義，也就是所謂的幾吋，也會有不同的比例，比如相同的對角線尺寸，但不同螢幕比例下長寬就會有差異，例如4:3 / 16:9 / 16:10 …
你可以用這個連結來查詢真實的實體尺寸是多少，之前手邊沒有螢幕時會用這個在繪圖軟體畫出cm單位的圖印出來當實體參考。
注意，網頁的pixel 跟 APP的 pixel 意義不完全一樣
Resolution (解析度) & Device Pixel (物理像素)
顯示器Display表面是由無數小光點排列而成，稱為物理像素或像素點，簡稱px (device pixel)；螢幕Resolution都是固定的，都是以寬度像素 x 長度像素個數表示，例如1920px x 1080px。
px 是抽象相對的單位，不是絕對長度；舉例來說，24吋16:10的螢幕物理尺寸長寬分別是51.69cm x 32.3cm，最高解析度可能是1920 x 1080px；但13吋 MBP 螢幕物理尺寸比較小，最高解析度卻也是1920 x 1080px。
Screen Density (螢幕密度)
螢幕密度的定義是一個單位面積下的物理像素px個數，也就是將螢幕尺寸除以螢幕解析度，又因為螢幕尺寸是以對角線來表示，所以「螢幕密度」就是以「斜邊尺寸」除以「斜邊解析度 (像素數)」，單位是ppi，也就是pixel per inch，而整個公式是：
Screen Density = Resolution of Screen Size / Screen Size
PPI = {[(px of length)^2 + (px of width)^2]^(1/2) }/ (inch)
通常會看到兩個單位 dpi & ppi；dpi大部分用於印刷，d=dot 所謂的300dpi、150dpi、72dpi就是這個，但現在dpi & ppi在輸出上已經混用，尤其在illu。
iOS APP 開發單位：pt
因為螢幕製造技術的提升，Screen Density可以進一步往上提高，也就是每一平方吋裡面塞的px可以變更多的時候，在原本的螢幕尺寸上作圖就會遇到換算不同設備時的困難。
舉例來說，iPhone 3G的 Screen Size是3.5”，Resolution是320 x 480px，但iPhone 4加入了螢幕retina技術後，Resolution 是 960 x 640px，但Screen Size 一樣是3.5”，所以如果介面同樣是做一張320 x 480 px的圖片，放在iPhone，看起來會變成只有iPhone3 螢幕裡的1/2大小。
為了避免這個在不同螢幕上大小不一致的問題，iOS在開發上重新定義了一個新單位：「pt (point)」，一個以螢幕密度為163ppi為基準的絕對物理單位，在iOS上溝通單位就可以用pt來取代px：
1 iOS pt = 1/163 inch
也就是說，當我們在iOS app作圖換算倍率時，其實是以iPhone 3G為基礎來看待其他iOS的螢幕，那pt 與 px之間的關係是什麼？以上圖例子來說：
when it is displayed on iPhone 3G:
Density: [ (480px)^2 + (320px)^2 ]^(1/2) / (3.5inch) = (163 px/inch)
163ppi = 163 (px/inch) , so 1 inch = 163 pt = 163px, 1pt = 1px
when it is displayed on iPhone 4:
Denity: [ (960px)² + (640px)² ]^(1/2) / (3.5inch) = (326 ppi)
326ppi = 326 (px/inch), so 1 inch = 163pt, 1pt = 2px
但這邊要注意的是，iPhone3G時1pt=1px，但在2倍ppi的時候其實長寬都需要兩倍，因此1pt=2px其實指的是單向維度，實際上是原本1個pt需要一個px來填滿，現在1個pt需要4個px填滿，簡單來說：
當163ppi下，1pt = 1px，等於一個 pt裡面可以放下一個pixel (1x1)
當326ppi下，1pt = 4px，等於一個 pt裡面可以放下四個pixel (2x2)
看到這邊可以發現，device pixel 雖然是一個像素點，但實際上的“物理大小”是可以越縮越小，換句話說也就是面板製造技術越來越好，可以用更多pixel塞在同樣尺寸的螢幕裡面，也就是所謂高解析度。
Android 的APP開發單位：DP
同樣道理，不同的螢幕尺寸跟解析度也發生在Android上，所以一樣有一個替代單位 dp 來取代，不同的是 dp 是以160dpi為基準所換算，在不同dp密度下，一個在顯示結果上一樣“大小”的icon，實際上是由不同px製作而成。
製作上的建議
為了要維持一定比例大小的圖，必須要用不同的px尺寸輸出圖片，最好方式還是以1x的基礎做圖，然後往上輸出成不同倍率的尺寸，讓工程師後續可以抓圖使用。
網頁上的開發單位：CSS pixel
雖然它也叫做pixel，但實際上意義和前面設備上的像素點是截然不同的，而是由W3C所定義出來給瀏覽器Browser 所使用的抽象單位，也就是另外一個以物理世界長度為基準的狀況下，會變動的單位。在低解析度桌上型設備或筆電上，CSS pixel = device pixel，也就是 CSS pixel = px，但如果是在高解析度例如印表機或是行動裝置，就會有變化。
在程式設定下已經規定好，因此在網頁開發上通常不會看Resolution，而是看設備參考的device-width作為斷點的設定依據，例如底下連結，不過還是要問一下專業大大，但簡單說至少要做成三種尺寸給工程師去作。
在高密度的螢幕下，1px(CSS pixel)依舊可能會有多個物理像素 (device pixel)，在不同設備上會有不同的呈現差異，比如一張 200x200的bitmap 利用CSS pixel 呈現在1x的螢幕上沒問題，每一個CSS pixel 都能對應在 1x 的 device pixel；但在2x的螢幕上會需要用400x400 個device pixel來顯示，所以一個CSS pixel 會有4個 device pixel來顯示，會取相同色塊填滿，顯示的結果就是高解析螢幕沒有表顯得比低解析度好。
處理方式1，利用高解析圖片做採樣處理
如果使用高解析度圖片在網頁上呈現，經過CSS來處理後，在高解析度上可以呈現出原本該有的細膩細節，但在低解析度上透過CSS處理降低採樣，所以呈現品質相對就比較差（但螢幕本來就差，所以根本沒差），但問題是不管哪一種設備都會下載高解析圖片，變成下載大圖這件事很麻煩。
處理方式2，利用程式處理選擇不同尺寸圖片
利用程式碼處理，不同倍率設備選擇不同倍率的圖片來處理，只是程式上需要多一些設定。
處理方式3，利用向量格式處理
像是SVG檔案，通常用在logo or icon這類相對不複雜的圖形，或是使用icon fonts來處理，這類就沒在這邊了。
總結：開發APP
不管 iOS或是 Android，pixel 都是 device pixel，不同倍率要有不同解析度圖片，配合 iOS pt 或是 Android DP
總結：開發Web
Pixel 是 CSS pixel，尤其是RWD以及不同screen density的時候，要注意圖像優化跟viewport以及 break point，可以參考http://screensiz.es/ 裡面的device-width，而不是 resolution
補充：
前端工程師蔡大大說，目前裝置已經可以處理時使用一致比例，所以在作圖時這部分其實還好，但圖片部分提供素材要比原本尺寸大個1.5倍左右
其他實務上相關的觀念，有任何觀點也麻煩大家不吝賜教
主要參考來源：
https://read01.com/zh-tw/KB223k.html#.WbpICdMjHBL
iPhone尺寸繪製建議
Material Design上的手持裝置基本資料
