Calculs de résolution CSS

Question

Je travaille actuellement sur un projet responsive. J'ai la mise en page triée et maintenant je suis en train d'implémenter les requêtes média. Je comprends le concept de largeur, de largeur de périphérique, de rapport de pixel et de différence entre les pixels physiques et les pixels CSS.

Cependant, la requête de médias de résolution me confondre. Je trouve que de nombreux écrans non rétiniens ont une résolution CSS de 96ppi ou 96dpi et les écrans rétiniens ont une résolution de 192ppi ou 192dpi.

Comment cette valeur est-elle calculée exactement? Est-ce qu'il y a une formule ou quelque chose comme ça?

Answer 1

Vous compliquez un peu les choses.

Avec css, vous travaillez avec des pixels CSS. Les appareils eux-mêmes décident alors de ce qu'il faut faire avec vos pixels CSS en fonction de leurs résolutions. Pour répondre, vous builds pouvez travailler exclusivement avec des pixels css et permettre aux dispositifs de décider comment ils convertissent ces pixels css réelles

Par exemple, si vous avez utilisé la requête média:

@media screen and (min-width: 480px)

vous frapper tout périphérique ayant signalé que sa largeur est de 480 css pixels (ou plus). Le nombre réel de pixels physiques n'est pas pertinent n'est pas le problème de l'auteur css.

Une zone où ce n'est pas le cas est cependant les images. Vous souhaiterez peut-être diffuser des images dont la qualité est deux fois supérieure à celle des appareils rétina, car ces pixels supplémentaires seront utiles pour la clarté de l'image. Dans ce cas, une requête multimédia dpi sera utile. (Attention: gardez à l'esprit que de nombreux utilisateurs mobiles préféreraient avoir un chargement de page plus rapide que d'avoir une image de très haute qualité quatre fois plus grande).

@media screen and (min-resolution: 192dpi) { 
    /* load that high definition image here */ 
} 

Le rapport entre les pixels de l'appareil et ppp est une fonction de la taille des pixels, ce paramètre est réglé sur un appareil en fonction de l'appareil, généralement en fonction de la façon dont toute petite Manufactures peut faire leurs pixels pour annoncer le plus haut affichage de définition. Retina était un grand pas en avant dans ce domaine.