Relazione tra dp-sp e PX

Question

Non sto chiedendo quale sia la differenza tra dp, sp e px.

Sto progettando un sito Web basato sul nuovo design di materiale di Google, tutte le misure sono in dp (per griglia) e sp (per testo). La mia domanda è come si traducono in pixel. Ho progettato siti web da più di 4 anni e tutte le misure (griglia e font) sono in pixel.

Per esempio:

1. Un titolo è 24sp, quanti pixel ci si equivale a? (non è a 24px, ho provato ad abbinarli, è di circa 28px ma devono esserci sistemi di misurazione standard).
2. Linea guida della griglia: "Tutti i componenti sono allineati a una griglia di base quadrata da 8 dp." - Quanti pixel equivale a?

1px =? Dp =? Sp su un desktop o un monitor o dispositivo mobile medio?

Answer 1

Mi raccomando di leggere le definizioni di Google di dp e SP, che si possono trovare nella documentazione Android, here e here.

Ci sono anche alcune informazioni utili nel meraviglioso Designer's Guide to DPI.

Answer 2

Penso che la risposta sarà:

1px = 1DP = 1sp su qualsiasi monitor media o dispositivo mobile.

Come sono arrivato a questo?

Poiché un pixel è un pixel, per andriod dp e sp vengono utilizzati perché vengono utilizzati per app native che devono scalare e il dpi di ogni schermata è diverso in base al dispositivo. Per i desktop tutto questo è lo stesso, ovviamente il sito web deve essere compatibile/reattivo per i dispositivi mobili, ma dal momento che il sito Web viene caricato in un browser, alcuni lavori multimediali aggiuntivi (basati su linee guida) faranno il lavoro.

Se qualcuno ha qualche altra conclusione logica, si prega di condividere

Answer 3

Una regola empirica è usare 1 px = 1 dp.

Questo dovrebbe darvi un buon formato sicuro praticamente su qualsiasi dispositivo. Apparirà un po 'grande su alcuni dispositivi, in particolare l'iPad (normale).

Ecco perché:

"A dp corrisponde alla grandezza fisica di un pixel a 160 dpi" (https://developer.android.com/training/multiscreen/screendensities.html#TaskUseD)

160 dpi significa:

160 punti = 1 pollice

Pertanto:

160 dp = 1 pollice (25,4 mm)

Così quando Google consiglia che i pulsanti hanno un'altezza target di 48 dp tangibile, stanno dicendo che devono essere alti 0,3 pollici (7,6 mm).

Quindi quanti px è questo? Bene, questo dipende dal dispositivo.

Esempi per 48 dp (7,6 mm) Altezza pulsante:

• iPad mini: 48 px Perché: Il mini iPad schermo è di circa 120 mm e utilizza 768 px per riempire quello spazio . Pertanto, è necessario 162 px per ottenere un pollice (25,4 mm) o 48 px per l'altezza del pulsante di 7,6 mm.

• Kindle Fire (7 "): 43 px

• Kindle Fire (6"): 50 px

• iPhone: 48 px

• Nexus 7: 48 px

• iPad regolare: 39 px

(forse ho eluso l'arrotondamento su/giù un po 'piccolo .. Mi piace 48 meglio di 49!)

millimetri e la larghezza CSS px schermo per gli esempi: ho calcolato la larghezza dello schermo utilizzando le dimensioni dello schermo CSS px e lunghezza diagonale.

• iPad mini: risoluzione 1024 x 768 e diagonale 201 mm = larghezza 120 mm.
• Kindle Fire 7 ": risoluzione 858 x 533 e diagonale 178 mm = larghezza 94 mm
• Kindle Fire 6": risoluzione 853 x 533 e diagonale 152 mm = larghezza 81 mm.
• iPhone: risoluzione 568 x 320 e diagonale 102 mm = larghezza 50 mm.
• Nexus 7: risoluzione 960 * 600 e diagonale 178 mm = larghezza 94 mm.
• iPad regolare: risoluzione 1024 x 768 e diagonale 246 mm = larghezza 148 mm.

Si noti che per il calcolo dell'altezza px del pulsante è necessario utilizzare le dimensioni del dispositivo CSS px. Questi numeri non sono necessariamente uguali alle risoluzioni indicate nelle specifiche.