Android px, dp, sp的區別

Android px, dp, sp的區別

Android自興起以來，開發人員不斷增加，與此同時市場上參差不齊的裝置也不斷增加，隨之而來的則是開發人員需要適配眾多機型而帶來的困擾與抱怨。並且隨著不同廠家定製化不同的ROM，Android裝置的片段化現象日益嚴重。這篇文章主要講述如何設計中嚴格遵從設計表徵圖準的Android頁面。

1. px, dp, sp區別什麼是px

px就是我們通常所說的像素的單位，在css裡面，我們用px比較多。px主要指使用者在螢幕上看到的事物的實際大小單位。

什麼是dp

在看手機或者電腦參數時，我們經常說到一個關鍵詞，螢幕解析度(resolution)，解析度被表示成每一個方向上的像素數量，比如800x480解析度

中，我們可以看到15寸的retina pro解析度是2880x1800，而60寸的HDTV解析度卻只有1920x1080。可見如果60寸的HDTV也要達到Retina的顯示效果，其解析度大概至少為11520x7200。<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPrzIyLvS0b6t09DBy7fWsebCyrXEuMXE7qOsxMfDtM7Sw8e+zb/J0tTBy73iIGRwaShkb3QgcGVyIGluY2gptcS4xcTuwcuho2RwabG+0uLKx8O/06K057XjtcTK/cG/o6y1q8rH0rK+rbOjus1wcGkocGl4ZWwgcGVyIGluY2gpu+zTw6Gj1rjDv9OitOe1xM/xy9jK/cG/o6zSsrG7ztLDx7PGzqrGwcS7w9y2yKOsZHBp1L2086OszbzP8bTTytO+9cnPv7TG8MC01L3H5c76oaM8L3A+DQo8cD5Hb29nbGW52be9ttRkcLXEveLKzcjnz8KjujwvcD4NCjxibG9ja3F1b3RlPg0KCTxwPkEgdmlydHVhbCBwaXhlbCB1bml0IHRoYXQgeW91IHNob3VsZCB1c2Ugd2hlbiBkZWZpbmluZyBVSSBsYXlvdXQsIHRvIGV4cHJlc3MgbGF5b3V0IGRpbWVuc2lvbnMgb3IgcG9zaXRpb24gaW4gYSBkZW5zaXR5LWluZGVwZW5kZW50IHdheS48YnIgLz4NCglUaGUgZGVuc2l0eS1pbmRlcGVuZGVudCBwaXhlbCBpcyBlcXVpdmFsZW50IHRvIG9uZSBwaHlzaWNhbCBwaXhlbCBvbiBhIDE2MCBkcGkgc2NyZWVuLCB3aGljaCBpcyB0aGUgYmFzZWxpbmUgZGVuc2l0eSBhc3N1bWVkIGJ5IHRoZSBzeXN0ZW0gZm9yIGEgJmxkcXVvO21lZGl1bSZyZHF1bzsgZGVuc2l0eSBzY3JlZW4uIEF0IHJ1bnRpbWUsIHRoZSBzeXN0ZW0gdHJhbnNwYXJlbnRseSBoYW5kbGVzIGFueSBzY2FsaW5nIG9mIHRoZSBkcCB1bml0cywgYXMgbmVjZXNzYXJ5LCBiYXNlZCBvbiB0aGUgYWN0dWFsIGRlbnNpdHkgb2YgdGhlIHNjcmVlbiBpbiB1c2UuIFRoZSBjb252ZXJzaW9uIG9mIGRwIHVuaXRzIHRvIHNjcmVlbiBwaXhlbHMgaXMgc2ltcGxlOiBweCA9IGRwICogKGRwaSAvIDE2MCkuIEZvciBleGFtcGxlLCBvbiBhIDI0MCBkcGkgc2NyZWVuLCAxIGRwIGVxdWFscyAxLjUgcGh5c2ljYWwgcGl4ZWxzLiBZb3Ugc2hvdWxkIGFsd2F5cyB1c2UgZHAgdW5pdHMgd2hlbiBkZWZpbmluZyB5b3VyIGFwcGxpY2F0aW9uJnJzcXVvO3MgVUksIHRvIGVuc3VyZSBwcm9wZXIgZGlzcGxheSBvZiB5b3VyIFVJIG9uIHNjcmVlbnMgd2l0aCBkaWZmZXJlbnQgZGVuc2l0aWVzLjwvcD4NCjwvYmxvY2txdW90ZT4NCjxwPtPQwcvD3LbItcS4xcTuo6zO0sPHv8nS1Lj8usO1xMDtveJkcChkZW5zaXR5IGluZGVwZW5kZW50IHBpeGVsKcHLoaNkcMrHQW5kcm9pZNbQ08PAtLao0uVVSbK8vtbW0LHttO/UqsvYs9+057vyzrvWw7XE0ru49tDpxOK1xM/xy9i1pc67o6xkcLXEtObU2srHzqrBy9Kzw+bUqsvYzrvWw7K7ytzGwcS7w9y2yMv507DP7KGj0tTJ6LzGyqbJ6LzG0ru49kFQUNKzw+bOqsD9o6zJ6LzGyqbPo83708O7p8rTvvXJz7+0xvDAtMjntMujrNKyvs3Kx8novMbKpsnovMbKsc2os6PS1HB41/fOqrv5tKG1pc67oaO2+NTaxuTL+7K7zazGwcS7w9y2yLXEyeixuNbQo6zSss+jzfvE3Lm7vfjQ0NK7tqi1xMnsy/WjrMDgy8bT2s6ss9bSu7j2z+C21NK71sK1xLDZt9axyKGjy/nS1L+qt6LV382os6PQ6NKq0tRkcM6qtaXOu6Os0tTKytOmsrvNrMPctsi1xMbBxLuhozwvcD4NCjxwPsv50tRkcLrNcHjWrrzk09DSu8zXu7vL47Hq17yjujxjb2RlPnB4ID0gZHAgKiAoZHBpIC8gMTYwKTwvY29kZT6ho7zZyejU2mRwac6qMzIwtcTGwcS7yc+jrDFkcCA9IDJweKGjPC9wPg0KPGgzIGlkPQ=="什麼是sp">什麼是sp

sp是Android中專業為字型而設定的單位。使用sp作為字型單位不僅能夠使字型大小受螢幕密度影響，並且能夠使字型受使用者系統設定的影響。Android提供字型大小的設定選項。一旦使用sp作為字型，根據使用者佈建字型的不同，App中的字型大小也會顯示不同。但是在正常字型設定下，1dp ＝ 1sp。

2. 設計師視角

Android的多屏適配存在這麼多的尺寸，自然需要設計師和工程師之間找到溝通的橋樑，設計師如何規範設計才能夠更加符合Android的設計標準呢。設計師與工程師對於頁面的尺寸需要有一個共識性的標準，測試人員才可能進行更有效測試，才不致於因為不同機型顯示不同效果而引起不必要的工作量。

首先我們需要選擇一個相對通用的螢幕尺寸，可以參考現有的一些主流機型的尺寸。為了便於計算，我們選擇Nexus 4作為設計圖的原版標準。那麼所有的頁面都是基於Nexus4而產生的。Nexus4尺寸如下:

主屏尺寸4.7，主屏解析度：1280x768像素，螢幕像素密度320ppi。

一般來說，我們選擇市場上最常見的機型來設計，這裡我們為了計算方便，選擇320ppi的機型，設計圖中尺寸將是標準圖中的2倍。假設在設計圖中，頁面內邊距為32px, 按鈕的高度為96px, icon大小為48x48。

通過px＝dp*(dpi/160)的標準，設計師給開發人員標註圖時可標註頁面邊界為16dp，按鈕高度為48dp，icon則分別出四套mdpi, hdpi, xhdpi, xxhdpi標準。

3. 開發人員視角margin, padding, height, width

從開發人員角度來看，對於控制項的尺寸，高度等，只需要按照轉化後的dp設定即可。

android:layout_padding="16dp"android:layout_height="48dp"

以dp為單位能夠保證不同解析度螢幕上顯示不同大小的字型。並且能夠保持相對大小，這樣也更符合設計的初衷。

圖片資源

對於png製作出來的圖片，一般大小固定，沒辦法像尺寸一樣自動的伸縮。所以Android會存在至少4個資源檔夾。當App運行過程中，系統能夠根據當前裝置的螢幕密度，自動選擇使用哪種尺寸的圖片資源。

ldpi	mdpi	hdpi	xhdpi	xxhdpi	xxxhdpi
0.75	1	1.5	2	3	4
120	160	240	320	480	640
18x18	24x24	36x36	48x48	72x72	96x96

4. 更多

附上Android主流機型：

Android：主流機型主要為 480x800, 480x854, 540x960, 720x1280, 800x1280 這五種。
（非主流機型還包括：240x320, 320x480, 640x960 這三種，其中兩種都與 iPhone 一致。）
iOS: 主流機型主要為 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 這五種。
WP：主流機型主要為 480x800，720x1280, 768x1280 這三種

Photoshop製圖時，字型大小通常是pt這個單位。pt是長度單位， 1pt = 1/72英寸， px = pt * dpi/72。

另附上豆瓣關於這些單位更具體的闡釋。