Definizione della larghezza/altezza css in unità indipendenti dal dispositivo?

Question

Ho un div e sto cercando di capire come farlo occupare la stessa quantità di spazio sullo schermo indipendentemente dalla densità del display del dispositivo.

Ad esempio, supponiamo di disporre di due dispositivi di larghezza pari a 5 pollici. Il primo display ha un rapporto dispositivo-pixel = 1, mentre il secondo ha un rapporto dispositivo-pixel = 2.

Device 1: 5 inches wide, device-pixel-ratio=1 
Device 2: 5 inches wide, device-pixel-ratio=2 

Quindi il secondo dispositivo ha il doppio dei pixel imballati nello stesso spazio.

mio stile div:

.myDivStyle { 
    width: 100px; 
    height: 50px; 
} 

Se ho capito bene, dispositivo 2 sembrerebbe rendere il div alla metà della larghezza/altezza sul dispositivo 1.

Se questo è il caso, c'è un modo per definire la nostra larghezza/altezza in un'unità indipendente dal dispositivo? Oppure dobbiamo ridimensionare tutti i nostri stili manualmente sul caricamento della pagina ecc. Dopo aver esaminato l'attributo device-pixel-ratio?

si

Answer 1

Grazie Questo suona più come è necessario lavorare con percentuali invece di pixel. Quindi utilizzerà una quantità "percentuale" del tuo schermo

.myDivStyle { 
    width: 50%; 
    height: 25%; 
} 

Risolve il problema con la quantità di pixel. Questo risolverebbe il problema se lavorassi con lo schermo di un Iphone e di un Android, poiché usano due risoluzioni completamente diverse. Per esempio, credo che l'Iphone usi 320 per .. qualcosa, mentre il mio Samsung Galaxy usa penso 480 per qualcosa. (non so i valori veri)

Answer 2

La ridefinizione della dimensione del css utilizzando l'unità em sarebbe buona.

Alcuni collegamenti validi in questo riferimento. Si prega di controllare questi

1. w3.org
2. w3.org
3. css-tricks

Tutti i link sopra sollecitare che, em calza meglio nei casi in cui si desidera che il documento si comporti bene su un'ampia gamma di dispositivi .

Answer 3

maggior parte dei dispositivi sarebbe venuto con i seguenti 3 risoluzioni 1) HVGA-Metà di VGA (320 x 240) 2) WVGA- ampia VGA (800x 480) - quasi 1,5 volte di HVGA 3) 2x HVGA - (640 X 960) - IPHONE 4 utilizza presente risoluzione

scrittura separato file CSS per i suddetti tre risoluzioni da

@Media screen and (min-width: 320px) and (max-width: 480px){ 
/* css files here*/ 
} 

o

@Media screen and (min-device-pixel-ratio: 2) 
{/* css files here*/ 

} 

Fai lo stesso con altre risoluzioni. Una classe css creata in 1 risoluzione dovrebbe essere copiata in tutte e tre le risoluzioni per ottenere una visualizzazione perfetta.In questo modo è possibile mostrare un perfetto stile specifico del dispositivo