Corsi on-line

Differenza tra CSS Pixel e Device Pixel

Concettualmente un CSS Pixel è definibile come un elemento unitario virtuale adottato dai programmi per la navigazione Web per ottenere rendering di pagina quanto più precisi possibile; nei display a densità standard un CSS Pixel equivale ad un singolo pixel in visualizzazione, ma tale elemento ha il vantaggio di rimanere costante indipendentemente dallo schermo di riferimento e dalla tecnologia utilizzata per la sua realizzazione.

In sostanza, un  CSS Pixel si differenzia da un Device Pixel per il fatto di rappresentare un’astrazione, il secondo è invece definibile come l’unità “fisica” più piccola di un display; per fare un esempio, potremmo analizziare il caso della semplice definizione delle dimensioni di un divbox tramite HTML:

<div height="100" width="150"></div>

Ora, l’elemento definito verrà visualizzato tenendo conto delle dimensioni specificate in un qualsiasi display in cui la densità dei pixel sia standard, ciò invece non avverrà in uno schermo capace di supportare una densità maggiore, come ad esempio il Retina Display dei dispositivi Apple, dove  i Device Pixel verranno quadruplicati. Attenzione, non parliamo di maggiori dimensioni, ma di maggiore densità di pixel per una superficie equivalente.

I CSS Pixel, in quanto valori di riferimento, rimarranno invece stabili; in un Retina Display, 2px*2px (ivi compresi i Bitmap Pixel) diventeranno 4px*4px per effetto della moltiplicazione necessaria all’ottenimento della dimensione fisica attesa per un elemento, i CSS Pixel saranno invece sempre 2px*2px.

Il rapporto matematico tra CSS Pixel e Device Pixel è chiamato “ratio” e potrà essere ottenuto tramite media query tenendo conto dei prefissi associati ai vari vendor, in alternativa Javascript offre un metodo equivalente denominato window.devicePixelRatio.

Post correlati
I più letti del mese
Tematiche