Cosa sono le unità dp (pixel indipendenti dalla densità) con CSS?

Per Android, le persone consigliano di utilizzare le misurazioni dp (densità indipendenti dai pixel) per gli elementi dell'interfaccia utente e esistono convenzioni come l'utilizzo 48dpper l'altezza di un pulsante, ecc.

Sto lavorando a un'applicazione web e sto ricevendo molte critiche sul design dell'interfaccia utente dicendo che non è conforme agli standard di progettazione Android. Ovviamente, la mia applicazione avrà un aspetto diverso poiché utilizza CSS e HTML invece del tema Android Holo, ma vorrei comunque renderlo conforme il più possibile. Tuttavia i CSS non consentono misurazioni indipendenti dalla densità.

Quando provo la mia applicazione su diverse risoluzioni e densità di pixel, non ha un bell'aspetto e, a volte, è sproporzionata, quindi non è nemmeno funzionale. CSS non ha unità dp come lo sviluppo nativo di Android, ma mi chiedevo quali siano alcune alternative.

Posso in qualche modo ottenere la densità dei pixel utilizzando Javascript e ridimensionare manualmente tutto in modo appropriato? Qual è il modo migliore per creare un'app Web che abbia un aspetto e funzioni correttamente con tutte le risoluzioni / densità?

http://www.w3.org/TR/css3-values/#lengths

L'unità più vicina disponibile in CSS sono le unità percentuali di visualizzazione.

• vw - Pari all'1% della larghezza del blocco contenitore iniziale.
• vh - Pari all'1% dell'altezza del blocco contenitore iniziale.
• vmin - Uguale al minore tra vw o vh.
• vmax - Uguale al maggiore tra vw o vh.

L'unico browser mobile di cui essere consapevoli che non supporta queste unità è Opera. http://caniuse.com/#feat=viewport-units

Non sono d'accordo con la risposta attualmente accettata. Come suggerisce uber5001, a pxè un'unità fissa e con uno spirito simile agli sforzi dello specifico Android dp.

Per specifica del materiale :

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

Inoltre

Quando si progetta per il Web, sostituire dp con px (per pixel).

Usa rem.

È la dimensione del carattere dell'elemento radice e un'ottima unità di base per la dimensione di altri elementi dell'interfaccia utente.

Se si usasse la stessa dimensione assoluta (in centimetri), il testo e gli altri elementi sarebbero troppo grandi sul cellulare o troppo piccoli sul desktop.

Se si usasse la stessa quantità di pixel, il testo e altri elementi sarebbero troppo piccoli sui dispositivi mobili o troppo grandi sui desktop.

L' remunità è sul posto perché dice "Ehi, questo è quanto dovrebbe essere grande il testo normale". Basare la dimensione di altri elementi dell'interfaccia utente su questo è una scelta abbastanza ragionevole.

In CSS3 potrebbe essere più accurato dire che il web non ha Android px. Le specifiche dei CSS3px dicono questo:

pixel; 1px è uguale a 1/96 di 1 pollice

px potrebbe essere la misura che desideri, in futuro.

A partire da CSS3, non ci sono unità CSS che siano veramente indipendenti dal dispositivo. Vedi le specifiche W3C sulle lunghezze assolute . In particolare, le unità assolute potrebbero non corrispondere alle loro misurazioni fisiche.

Se le unità fisiche fossero fedeli al loro scopo, potresti usare qualcosa come i punti; i punti sono abbastanza vicini a dps:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

Se usi SCSS, puoi scrivere una funzione da restituire in punti:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

E usalo:

.shadow-2 {
  height: dp(2);
}

Che ne dici di un'interfaccia basata su unità rem?

Non sono abbastanza esperto in materia per confermare, ma penso che potresti fare un po 'di matematica basata sulla dimensione del viewport per applicare una dimensione del carattere nell'elemento radice e l'intera interfaccia si adatterebbe di conseguenza. Questa roba è ancora un po 'stregoneria per me.

Perché non utilizzare i punti, è una dimensione coerente su tutti i dispositivi. Ed è relativo alle dimensioni dello schermo. La maggior parte non lo conosce poiché proviene dall'editoria tradizionale.

Che ne dici di usare un mix tra vw (larghezza dello schermo per qualsiasi dispositivo) ed em? Qui la dimensione del carattere cambia dinamicamente, a seconda della larghezza dello schermo del dispositivo. Usa nel tuo file CSS principale la prossima regola:

font-size: calc(100vw * 10 / 375);

(la larghezza per iPhone 6/7/8 è 375px, cambiala in 320px (iPhone5) e così via)

In tutti i casi funzionerà perfettamente. C'è solo un aspetto negativo. Se il tuo obiettivo è "pixel perfetto", devi utilizzare numeri grandi dopo il punto.

Esempio: il tuo obiettivo è la dimensione del carattere h5: 18px su tutti gli schermi.

Allora il tuo "em" perfetto sarà:

h5 { 
 font-size: 1.79904em;
 }

senza perfezione usa 18/10:

h5 { 
 font-size: 1.8em;
 }

Secondo Google Chrome ottieni 18.0096px;