dp - sp和PX之間的關係

Question

我不是問dp，sp和px有什麼區別。

我正在設計一個基於谷歌新材料設計的網站，所有的測量都在dp（對於網格）和sp（對於文本）。我的問題是他們如何轉換爲像素。我一直在設計網站超過4年，所有的測量（網格和字體）都是以像素爲單位。

例如：

1. 的大字標題是24sp，多少像素它等同於？ （它不是24像素，我試過匹配它們，大約是28像素，但必須有標準的測量系統）。
2. 網格指導：「所有組件都對準8 dp方形基線網格。」 - 它等於多少個像素？

1px =？dp =？sp在桌面或任何平均顯示器或移動設備上？

Answer 1

我建議閱讀DP和SP的谷歌的定義，它可以在Android文檔，here和here被發現。

還有一些有用的信息在精彩Designer's Guide to DPI。

Answer 2

我認爲答案將是：

1px的= = 1DP 1SP任何普通的顯示器或移動設備上。

我是怎麼想出來的？

由於像素是一個像素，所以使用了dp和sp，因爲它們用於必須縮放的原生應用程序，並且每個屏幕的dpi基於設備而不同。對於桌面系統來說，所有這些都是一樣的，當然網站必須兼容/響應移動設備，但是由於網站在瀏覽器中加載，一些額外的媒體需求（基於指南）將完成這項工作。

如果有人有一些其他的合乎邏輯的結論，請分享

Answer 3

安全的經驗法則是使用1 px = 1 dp。

這應該會給你幾乎任何設備上的安全大小。在某些設備上它會顯得有點大，特別是iPad（普通）。

這裏的原因：

「A DP對應於在160 dpi的一個像素的物理尺寸」（https://developer.android.com/training/multiscreen/screendensities.html#TaskUseD）

160 dpi的裝置：

160點= 1英寸

因此：

160 dp = 1英寸（25.4mm）

因此，當Google建議按鈕的可觸摸目標高度爲48 dp時，他們說他們需要高0.3英寸（7.6毫米）。

那麼這是多少個像素？那麼，這取決於設備。

• iPad的迷你：

  48 DP（7.6毫米）按鈕高度

  實例48 PX 爲什麼： iPad的迷你屏幕是寬大約120mm，並使用768像素來填充該空間。因此，您需要162像素來佔用一英寸（25.4毫米），或者說，對於7.6毫米的按鈕高度，需要48像素。

• 燒火（7 「）：43像素

• 燒火（6」）：50像素

• iPhone：48 PX

• 的Nexus 7：48 PX

• 普通iPad：39 px

（I可能已經捏造舍入向上/向下一點點..我喜歡比49 48更好！）

屏幕毫米和CSS例子PX寬度：我使用CSS PX屏幕尺寸計算屏幕寬度和對角線長度。

• iPad mini：1024 x 768分辨率和201 mm對角線= 120 mm寬。 Kindle Fire 7「：858 x 533分辨率和178毫米對角線長度= 94毫米寬度。
• Kindle Fire 7英寸：
• iPhone：568 x 320分辨率和102毫米對角線= 50毫米寬度。
• Nexus 7：960 * 600分辨率和178毫米對角線= 94毫米寬度。
• iPad常規：1024 x 768分辨率和246毫米對角線= 148毫米寬度。

請注意，爲了計算按鈕的px高度，您需要使用設備CSS px尺寸。這些數字不一定與規格中所述的解決方案相同。