pixel density, pixel ratio, css pixels

Les écrans n’ont pas tout la même résolution, et cette résolution peut changer de manière dramatique entre un écran de résolution HD au format « écran d’ordinateur » et au format « téléphone intelligent ». Si la taille est la même, on ne peut pas traiter ces deux affichages de la même façon.

C’est là qu’intervient le « pixel ratio » : on divise par un coefficient le nombre de pixels physiques pour obtenir un nombre dit de « pixels CSS ». Les styles CSS se baseront sur ces unités, adaptées au format de l’écran.

Le pixel-ratio indique la correspondance entre un pixel CSS et le nombre de pixels physiques recouverts