Come convertire tra Android DP e CSS px?

Vedo che questa è probabilmente una domanda noob, ma mi confonde davvero.

Sto leggendo documenti da Google Material Design, insieme ad alcune delle sue implementazioni in CSS. Le specifiche sono scritte in Android dp, mentre i codici css usano pxcome unità di lunghezza.

Ciò che mi confonde è che le implementazioni CSS spesso usano il valore esatto dalle specifiche, ad esempio un brindisi dovrebbe avere :

Altezza snackbar a linea singola: 48 dp di altezza

Larghezza minima: 288 dp

Angolo arrotondato di 2 dp

CSS corrispondente :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

Nella mia attuale comprensione, un Android DPviene generalmente visualizzato alla dimensione di un pixel su uno schermo da 160 dpi, mentre il CSS pxè definito come un angolo visivo. Quindi a pxcapita di essere uguale a dpquando si vede a distanza? In tal caso, è un modello comune da utilizzare pxcome dpin CSS o ho frainteso completamente il codice CSS?

Non so nulla dello sviluppo di Android prima e non di un designer. Grazie per qualsiasi aiuto.

Penso che l'accettazione sia sbagliata. Il CSS CSS è in realtà Pixel indipendente dal dispositivo (dip), ed è un modello comune usare px come DP in CSS.

Credo che la risposta completa alla tua domanda possa essere trovata qui:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

Per convertire dp in px devi tenere conto delle dimensioni del display a cui ti stai rivolgendo. Maggiore è il DPI, più pixel dovrai stipare nella stessa area per renderlo bello ed evitare pixel :

ldpi: 1 dp = 0.75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1.5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

Per esempio:

Un quadrato 3x3 dp in CSS o Photoshop deve essere:

2.25x2.25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi (questa risoluzione verrà utilizzato su dispositivi di prossima generazione)

Sulla base di quanto sopra, le tue calculatine dovrebbero apparire così, usando un moltiplicatore 3x dp per gli schermi XXHDPI:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android riduce automaticamente le immagini se rileva che la risoluzione del dispositivo utilizzato è inferiore, quindi sei sicuro di sviluppare tenendo a mente XXHDPI, poiché si rivolge alla maggior parte dei dispositivi di fascia alta di oggi sul mercato.

Ecco un semplice convertitore per fare il lavoro per te: http://androidpixels.net/

W3C dice :

L'unità px ti protegge quindi dal dover conoscere la risoluzione del dispositivo. Indipendentemente dal fatto che l'output sia 96 dpi, 100 dpi, 220 dpi o 1800 dpi, una lunghezza espressa come numero intero di px sembra sempre buona e molto simile su tutti i dispositivi (...)

Eppure dice:

Per avere un'idea dell'aspetto di un px, immagina un monitor CRT degli anni '90: il punto più piccolo che può visualizzare misura circa 1/5 di pollice (0,25 mm) o poco più. L'unità px ha preso il nome da quei pixel dello schermo.

Dice anche:

In effetti, CSS richiede che 1px deve essere esattamente 1/96 di pollice in tutto l'output stampato (...)

Considerando che per impostazione predefinita i dispositivi dello schermo sono configurati come 96 dpi, è il presupposto migliore su come i browser interpretano un pixel CSS:

96 css-px = ~ 1 inch

E sappiamo che su Android:

160 dp = ~ 1 inch

Così:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

E secondo quello:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

Bene, ho pensato che fosse giusto fino a quando non ho controllato le dimensioni di Toast di Google Polymer :

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

Quindi è una conversione da 1 a 1, e da questo abbiamo ottenuto che i browser Android utilizzano:

1 css-px = 1 dp

E 96 css-px per pollice sono utilizzati su altri dispositivi come desktop e laptop.

Per concludere: i pixel CSS sono indipendenti dal DPI del dispositivo e sui dispositivi Android 1 CSS-px è uguale a 1 dB.

Non esiste una risposta giusta, in realtà ce ne sono due:

1. Consigliato da Google (ad es. Nel corso Udacity su Material Design): utilizzare una conversione semplice, che in molti casi è 1: 1 proprio come nella libreria Polymer. Ad esempio, non è adatto per la visualizzazione della retina , quindi piuttosto che 1: 1, utilizza un rapporto di densità fornito nella tabella dei dispositivi nella Guida alla progettazione dei materiali ufficiale ( tabella con rapporti e metriche specifiche per alcuni dispositivi popolari ) e fornisci query @media adatte per soglie e risorse di risoluzione , supponendo che 1dp sia uguale a 1px per un display mdpi (160 dpi / ppi) .

Nota: idea generale: nella parte inferiore della pagina: ridimensionamento dell'immagine con alcune immagini per visualizzare i rapporti per più soglie di risoluzione dello schermo (immagine Breakpoint)

2. se si desidera una consistenza ultra uniforme per tutti i dispositivi per la progettazione , è necessario effettuare ulteriori ricerche e calcoli e, cosa più importante, una pila di più query @media per supportare tutti i dispositivi desiderati e fornire il fallback (con il metodo di cui al primo posto) per quelli che non ti interessano così tanto.

Ecco informazioni più dettagliate per coloro che vogliono approfondire maggiormente l'argomento, ma è una spiegazione e una logica alla base, quanto sopra è una risposta completa :

Il fatto è che la "densità di pixel", secondo la guida ufficiale di Material Design (Layout> Unità e misure), è:

il numero di pixel che si adattano a un pollice.

Quindi in sostanza la densità di pixel è un nuovo nome per un valore ppi o poiché molte persone non lo riconoscono come una cosa separata, un valore dpi.

Definizione di 1dp secondo la stessa guida:

Un dp è uguale a un pixel fisico su uno schermo con una densità di 160 . Per calcolare dp:

dp = (larghezza in pixel * 160) / densità dello schermo

Quando scrivi CSS, usa px ovunque sia indicato dp o sp. Dp deve essere utilizzato solo per lo sviluppo per Android.

Il principio principale della progettazione dei materiali è mantenere dimensioni fisiche coerenti su diverse piattaforme, il che solleva il problema della risoluzione del desktop, ppi (/ dpi) e il pixel css nel qual caso dovresti attenersi al calcolo del dp proprio come nel caso di Android dispositivi, e non è vero che la maggior parte degli schermi sono 96ppi (è un presupposto importante per i CSS), gran parte di essi ha un ppi un po 'più alto e se si tiene conto non solo del desktop tradizionale ma anche di un normale laptop , o i tablet, o i "convertibili" come Surface, c'è una necessità per la conversione: di solito vanno da 100-130ppi, che ha detto che quello che sto usando al momento è 127ppi:

100% = 160ppi -> larghezza fisica di 1 pixel = 1dp -> rettangolo 100x100px = 100x100dp

79% = 127ppi -> larghezza fisica di 1 pixel = ca. 0,8dp -> rettangolo 100x100px = 80x80dp

Sebbene dp sia un'unità pura e nuova solo per Android, dovresti fare alcuni calcoli per adattare i layout MD che sono tutti disponibili in dp. Se vuoi avere qualche idea in più di quanto sarà grande l'elemento specifico in senso fisico, il più utile ai fini della domanda è il valore della gamma di dimensioni del tocco ideale nelle linee guida per la progettazione dei materiali per dispositivi specifici ** Sotto il valore dp c'è fisico. ** Il valore di dp cambia, ma il fisico rimane lo stesso.

Il problema, per cui è necessario calcolare le unità, è ulteriormente spiegato nella guida API di Android (Conversione di unità dp in unità pixel) e si applica ancora agli elementi in stile CSS:

In alcuni casi, dovrai esprimere le dimensioni in dp e poi convertirle> in pixel.

Immagina un'applicazione in cui un gesto di scorrimento o di lancio viene riconosciuto dopo che il dito dell'utente si è spostato di almeno 16 pixel. Sulla schermata di base, l'utente deve spostarsi di 16 pixel / 160 dpi, che equivale a 1/10 di pollice (o 2,5 mm) prima che il gesto venga riconosciuto. Su un dispositivo con un display ad alta densità (240 dpi), l'utente deve spostarsi di 16 pixel / 240 dpi, che equivale a 1/15 di pollice (o 1,7 mm). La distanza è molto più breve e l'applicazione appare quindi più sensibile all'utente.

La conversione del polimero 1: 1 menzionata in precedenza è probabilmente dovuta al fatto che la densità di 96 dpi, o anche quella che ho dato, è da qualche parte nel gruppo a bassa densità o addirittura (come nel caso di 96 dpi), anche al di sotto di essa. Tenendo conto del fatto che il valore di dp non è un css accettato, è più facile supporre che il rapporto di densità (0,75- per basso, 1,0 medio e così via) sia quello che dovrebbe essere usato per semplificare e dimensioni multiple schermi supportati, che è mostrato nella tabella dei dispositivi per Material Design menzionata in precedenza. È anche menzionato come una delle migliori pratiche citate sopra nel capitolo della guida API di Android. Ed è qui che la conversione del polimero 1: 1 potrebbe essere buona, dal momento che molti dispositivi hanno il rapporto di densità a livello 1.

Tornando all'ultimo dilemma: il css px, se decidi di immergerti in sottili sfumature di diversi dispositivi. Se non sei così curioso, basta attenersi al rapporto Densità dalla tabella MD. Ma se sei un perfezionista, questo punto cruciale dei pixel CSS e della relazione sulle dimensioni fisiche ha una spiegazione perfetta (e piuttosto semplice) in una Raccomandazione del candidato del W3C:

Le unità di lunghezza assoluta sono fissate l'una rispetto all'altra e ancorate ad alcune misurazioni fisiche. Sono utili soprattutto quando è noto l'ambiente di output. Le unità assolute sono costituite dalle unità fisiche ('in', 'cm', 'mm', 'pt', 'pc', 'q') e l'unità dell'angolo visivo ('px') :

Per la lettura a distanza di braccio, 1 px corrisponde quindi a circa 0,26 mm (1/96 di pollice).

Nota: questa definizione di unità pixel e unità fisiche differisce dalle versioni precedenti di CSS. In particolare, nelle precedenti versioni di CSS l'unità pixel e le unità fisiche non erano correlate da un rapporto fisso: le unità fisiche erano sempre legate alle loro misurazioni fisiche mentre l'unità pixel variava per corrispondere più da vicino al pixel di riferimento. (Questa modifica è stata apportata perché troppi contenuti esistenti si basano sul presupposto di 96 dpi e l'interruzione di tale presupposto interrompe il contenuto.)

Questa nuova definizione di px (tenendo conto delle dimensioni fisiche) colma il divario tra pixel CSS e dps e ci consente di assicurarci che utilizzando semplici calcoli di misurazione il cosiddetto ambiente di output, che in questo caso sia coerente (in senso fisico ) MD layout , rimane lo stesso su diversi dispositivi e piattaforme. Inoltre, entrambe le linee guida W3C e MD utilizzano le immagini dei dispositivi a bassa e alta risoluzione per illustrare l'idea di base della copertura di pixel / punti: sono necessari più pixel (punti) per coprire un'area di 1 pixel per 1 pixel su un dispositivo ad alta risoluzione rispetto a su una a bassa risoluzione, il che significa che le query CSS ampiamente utilizzate per la visualizzazione della retina sono effettivamente la stessa cosa che devi fornire (ma con più soglie) per Material Design e tutti i dispositivi mobili.

Concludendo, usa il rapporto densità MD che è la migliore pratica raccomandata da Google o se sei fissato sulla precisione o il tuo design deve essere assolutamente coerente sulle dimensioni fisiche: usa la conversione accurata usando i valori ppi / dpi dello specifico o comune dispositivi (che è piuttosto folle), cosa puoi facilmente testare sullo strumento online di Google Resizer poiché rispettano in primo luogo le soglie comuni suggerite nella Guida MD e le regole di divisione per il rapporto e i nomi dei tipi di visualizzazione pertinenti (xlarge, medium e così via ) implementato in esso.

Quindi attenersi ai rapporti MD dalla tabella ricordando che la dimensione di pixel uguale dp di riferimento è per la risoluzione mdpi (160) e sarai buono.