? ? 前端開發(fā)過程中經常會遇到關于UI設計圖尺寸的問題，有的設計師會按照750*1334的分辨率來給出效果圖及標注圖，有的按6Plus的給汇四，甚至還有的會給640*1136接奈，面對各式各樣的屏幕尺寸，究竟依據(jù)哪種尺寸來進行頁面開發(fā)通孽，兼顧蘋果安卓等主流手機的屏幕適配序宦，首先要了解以下幾點概念，（基礎好的可略過）
1. 屏幕分辨率
屏幕分辨率是指屏幕圖像的精密度背苦，是顯示器所能顯示的像素的具體數(shù)值互捌。由于屏幕上的點、線和面都是由像素組成的行剂，屏幕具備的像素點越多秕噪，畫面就越精細。分辨率越高厚宰，單位面積內顯示的信息就越多腌巾，我們能看到的內容就越多。
PPI
屏幕分辨率一般使用 PPI 來表示精度铲觉。PPI（Pixels Per Inch）澈蝙，每英寸所擁有的像素數(shù)，屏幕的 PPI 越高撵幽，表示屏幕中的每個像素點之間的距離越接近灯荧，像素的密度越高，這樣屏幕內容看起來就更加細膩盐杂、真實逗载。
而當 PPI 超過 300 時，屏幕被認為達到了視網膜級別链烈，一般情況下人眼已經較難察覺 300 以上 PPI 之間的差別厉斟。
計算公式：
以 iphone 6 plus 為例，屏幕分辨率 1080 x 1920测垛，屏幕尺寸 5.5 英寸
PPI = √(1920 ^ 2 + 1080 ^ 2) / 5.5 = 400.5285…… ≈ 400
2. 縮放倍率（scaleFactor）
scaleFactor 由 Apple 公司為 iPhone 屏幕適配定義的標準捏膨。
早期的 iPhone 3GS 的屏幕分辨率是 320 x 480（PPI = 163）秧均，iOS 繪制圖形（CGPoint/CGSize/CGRect）均以點（point）為單位（measured in points）：
1 point = 1 pixel
后來在 iPhone 4 中食侮，同樣大小（3.5 inch）的屏幕采用了 Retina 顯示技術目胡，橫锯七、縱向方向像素密度都被放大到2倍，像素分辨率提高到 (320 x 2) x (480 x 2) = 640 x 960（PPI = 326）誉己， 顯像分辨率提升至 iPhone 3GS 的 4 倍（1 個 Point 被渲染成 1 個 2 x 2 的像素矩陣）眉尸。
但是對于開發(fā)者來說，iOS 繪制圖形的 API 依然沿襲 point（pt，注意區(qū)分印刷行業(yè)的“磅”）為單位噪猾。在同樣的邏輯坐標系下（320 x 480）：
1 point = scale x pixel
對于6+之前的手機霉祸，pt和px的比例為1:2。而6+出來之后袱蜡，這一比例達到了1:3.同時分辨率達到1242*2208丝蹭，但iphone實際分辨率為1080*1920，分辨率比率為1.15:1坪蚁。
其中 iPhone 6 Plus 的 scale = 3從方便開發(fā)角度來說奔穿，蘋果要保證切圖系數(shù)為整數(shù)，實際會在渲染時被 iOS 系統(tǒng)轉換敏晤，除以 1.15贱田，變?yōu)?2.608 倍左右
在這里為開發(fā)者提供一張簡單的表格，記錄了幾種主流 iPhone 手機的 scaleFactor 值嘴脾。
3. 屏幕比例
推薦 UI 尺寸
結合以上三點可以看出：滿足300以上ppi的分辨率男摧，及主流的屏幕比例9:16，加上縮放系數(shù)的換算難度等译打，得出推薦尺寸：以720 x 1280 分辨率為標準制作 UI 設計圖就可滿足市面主流的屏幕適配彩倚。
例：如果一個按鈕在 720 x 1280 的設計圖中占具了 160 px 寬，88 px 高扶平，開發(fā)人員的樣式應該指定該按鈕 width:80px; height:44px
