Cosa sono le unità dp (densità indipendente dai pixel) con CSS?

Question

Per Android, persone consigliamo usando dp (densità indipendente pixel) le misure per gli elementi dell'interfaccia utente, e ci sono le convenzioni che esistono come l'utilizzo di 48DP per un'altezza tasto, ecc

Sto lavorando su 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 mi piacerebbe comunque renderlo conforme il più possibile. Tuttavia, i CSS non consentono misurazioni indipendenti dalla densità.

quando verifico la mia applicazione su diverse risoluzioni e densità di pixel, non ha un bell'aspetto, e, a volte, è così sproporzionato quindi non è nemmeno funzionale. I CSS non hanno unità dp come lo sviluppo nativo di Android, ma mi chiedevo quali fossero alcune alternative.

Posso in qualche modo ottenere la densità di pixel utilizzando Javascript e scalare manualmente tutto in modo appropriato? Qual è il modo migliore per creare un'app Web che appaia e funzioni correttamente su tutte le risoluzioni/densità?

Answer 1

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

L'unità più simile disponibile in CSS sono le unità finestra-percentuali.

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

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

Answer 2

Che dire di un'interfaccia basata su unità REM?

Non sono abbastanza esperto sull'argomento da confermare, ma penso che si possa fare un po 'di matematica in base alla dimensione del viewport per applicare una dimensione del font nell'elemento root e l'intera interfaccia si adegui di conseguenza. Questa roba è ancora un po 'stregoneria per me.

Answer 3

In CSS3 può essere più esatto dire che il web non ha Android di px. The spec for CSS3's px dice questo:

pixel; 1px è uguale a 1/96th di 1in

px potrebbe essere la misura che si desidera, in futuro.

Answer 4

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

Per Material's spec:

Quando si scrive CSS, utilizzare px ovunque dp o sp sono rilevate. Dp deve essere utilizzato solo in via di sviluppo per Android.

Answer 5

Utilizzare rem.

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

Se uno usato la stessa dimensione assoluta (in centimetro), il testo e altri elementi sarebbe troppo grande sul cellulare o troppo piccola sul desktop.

Se uno usato la stessa quantità di pixel, il testo e altri elementi sarebbe troppo piccola sul cellulare o troppo grande sul desktop.

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

Answer 6

Perché non usare i punti, si tratta di un formato coerente tra i dispositivi. Ed è relativo alle dimensioni dello schermo. La maggior parte non ha familiarità con esso dal momento che proviene dalla pubblicazione tradizionale.

Answer 7

Come di CSS3, non ci sono unità di CSS che sono veramente indipendente dal dispositivo. Vedi lo W3C spec on absolute lengths. In particolare, le unità assolute potrebbero non corrispondere alle loro misurazioni fisiche.

Se le unità fisiche erano fedeli al loro scopo, si potrebbe usare qualcosa di simile a punti; punti sono abbastanza vicino a dps:

1 in = 72 pt 
1 in = 160 dp 

1 dp = 72/160 pt 

Se si utilizza SCSS, è possibile scrivere una funzione di tornare nel pts:

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

e usarlo:

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