Quelle est l'unité du CSS px ?

En CSS, le nom complet de px est pixel, qui signifie « pixel » en chinois. Il s'agit de l'unité de longueur de l'image numérique du système informatique. La résolution d'un écran d'ordinateur typique est de 96 DPI, ce qui signifie qu'un pixel équivaut à « 1/96 » de pouce.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

px est l'abréviation de pixel, qui est l'unité de pixel et l'unité de base de l'affichage de l'image. Il est traduit de l'anglais "pixel". Pix est l'abréviation courante du mot anglais "image". element" pour obtenir le pixel, donc "Pixel" signifie "élément d'image", parfois aussi appelé pel (élément d'image).

px (pixel, pixel) : Il s'agit d'une unité de longueur virtuelle, qui est l'unité de longueur de l'image numérique du système informatique. Si px doit être converti en longueur physique, la précision DPI (Dots Per Inch, pixels par pouce) doit être spécifié lors de la numérisation et de l’impression. Il existe généralement une option DPI. La valeur par défaut pour les systèmes Windows est de 96 dpi et celle par défaut pour les systèmes Apple est de 72 dpi.

En CSS, px est une unité de longueur relative, relative à la résolution d'affichage de l'écran.

• Sur le même appareil, le pixel physique représenté par chaque pixel CSS peut changer (c'est-à-dire le premier aspect de la relativité des pixels CSS)

• Entre différents appareils, chacun 1 Le pixel physique représenté par chaque CSS) ; le pixel peut être modifié (c'est-à-dire le deuxième aspect de la relativité des pixels CSS)

Différents appareils ont différentes unités d'image de base, telles que le pas du point du moniteur, qui peut être considéré comme les pixels physiques de l'écran. Le pas de point des moniteurs LCD actuels est généralement compris entre 0,25 mm et 0,29 mm. Les points d'encre de l'imprimante peuvent également être considérés comme les pixels physiques de l'imprimante, 300 DPI correspondent à 0,085 mm et 600 DPI correspondent à 0,042 mm.

Notez que ce que nous appelons habituellement la résolution du moniteur fait en fait référence à la résolution définie par le bureau, et non à la résolution physique du moniteur. Mais maintenant, les moniteurs LCD sont devenus courants. Puisque le principe d'affichage du LCD est différent de celui du CRT, l'effet d'affichage n'est meilleur que lorsque la résolution du bureau est cohérente avec la résolution physique. Désormais, la résolution de notre bureau est presque toujours la même. la résolution physique du moniteur est la même.

Selon la définition de la spécification CSS, px en CSS est une longueur relative, qui est relative à la résolution de l'appareil de visualisation. Ce dispositif de visualisation est généralement un écran d'ordinateur. La résolution d'un écran d'ordinateur typique est de 96 DPI, c'est-à-dire qu'un pixel équivaut à 1/96 de pouce (en fait, en supposant que la résolution de notre écran est cohérente avec la résolution physique et que le pas du point des cristaux liquides est en réalité compris entre 0,25 mm et 0,29 mm, Il est donc peu probable qu'il mesure exactement 1/96 de pouce, mais il suffit de s'en rapprocher).

D'une manière générale, px est le pixel physique du périphérique correspondant. Cependant, si la résolution du périphérique de sortie est très différente de celle de l'écran de l'ordinateur, il y aura des problèmes avec l'effet de sortie. Par exemple, la résolution de la sortie de l'imprimante sur papier est bien supérieure à celle de l'écran de l'ordinateur. Si les pixels physiques de l'appareil sont directement utilisés sans mise à l'échelle, les photos sur l'ordinateur imprimées par une imprimante 600 DPI seront environ 6 fois plus grandes. plus petit que lorsqu’il est visualisé sur un moniteur.

Le CSS stipule donc que dans ce cas, le navigateur doit mettre à l'échelle et ajuster la valeur des pixels pour maintenir une expérience de lecture généralement cohérente. C'est-à-dire que la longueur d'un certain pixel doit toujours apparaître de taille similaire sur les différentes sorties de l'appareil.

Comment s'en assurer ? La conversion directe en fonction de la taille des pixels physiques de l'appareil est certainement une solution, mais CSS prend davantage en compte il recommande que la conversion soit effectuée en fonction du « pixel de référence » (pixel de référence).

La taille vue par les yeux dépend de l'angle de vue. L'angle de vision dépend de la taille réelle de l'objet et de sa distance par rapport à l'œil. Un objet de 1 mètre carré situé à 10 mètres a presque la même taille qu'un objet de 10 cm carré situé à 1 mètre de distance. Cela relève du bon sens lorsqu'on dit qu'une montagne ne peut pas être vue à travers une feuille.

Ainsi, la spécification CSS utilise l'angle de vue pour définir le "pixel de référence". 1 pixel de référence équivaut à 1 point (soit 1/96 de pouce) lorsque l'on regarde la sortie d'un appareil avec une résolution de 96 DPI (soit 1 pouce 96 points) dans une perspective de bout de bras.

Veuillez noter cette différence - le pixel de référence défini par la spécification CSS n'est pas 1/96 de pouce, mais l'angle de vision de 1/96 de pouce à bout de bras. On pense généralement que la longueur moyenne du bras humain est de 28 pouces, de sorte que l'angle de vue peut être calculé à 0,0213 degrés. (c'est-à-dire (1/96)in / (28in * 2 * PI / 360deg))

Lorsque nous utilisons différentes sorties d'appareil, la distance typique entre les yeux et la sortie de l'appareil est différente. Par exemple, un écran d'ordinateur est généralement à bout de bras, tandis que lors de la lecture de livres et de papier (correspondant à la sortie d'une imprimante), il est généralement plus proche. Lorsque vous regardez la télévision, il sera plus éloigné. Par exemple, la recommandation générale est de 2,5 à 3 fois la longueur diagonale de l'écran du téléviseur - si vous avez un téléviseur couleur de 42 pouces, il se trouve à près de 3 mètres. Si vous regardez un film... Je ne sais pas jusqu'où il se trouve, vous pouvez le mesurer vous-même.

Donc, 1 pixel de référence :

correspond à 0,26 mm pour un écran d'ordinateur (soit 1/96 de pouce) ;

correspond à 0,20 mm pour une imprimante laser (en supposant une distance de lecture typique de 55 cm, soit

) ;

Lors de la conversion, pour une imprimante 300 DPI (c'est-à-dire que chaque point mesure 1/300 de pouce), 1 px est généralement arrondi à 3 points, soit environ 0,25 mm et pour une imprimante 600 DPI, il peut être arrondi à 5 points, soit 0,21 ; mm.

Pour résumer, le px est une unité relative et est toujours une valeur approximative sur un appareil spécifique (le principe est d'être le plus proche possible du pixel de référence).

Cependant, si vous comprenez les unités absolues comme un contrôle absolu sur l'effet de sortie, les choses sont assez différentes. En ce qui concerne l'objet principal de la sortie d'une page Web - l'écran de l'ordinateur, les px peuvent être considérés comme une unité de référence - cohérente avec la résolution du bureau. S'il s'agit d'un écran LCD, elle est presque toujours cohérente avec la résolution physique de l'écran. Écran LCD - c'est-à-dire On dit que le 1px défini par le web designer est "1 point sur le moniteur de l'utilisateur qui voit enfin cette page web" ! Au contraire, ces unités absolues ne sont pas du tout absolues.

Parce que les unités absolues telles que cm ou pt doivent être converties en pixels lorsqu'elles sont affichées à l'écran, et cette conversion n'est pas basée sur la longueur physique réelle des pixels (le navigateur n'a pas besoin de le savoir, et il est impossible de le savoir le moniteur actuel) Quelle est la longueur physique de 1px ?), mais elle est calculée en fonction du DPI défini par le bureau. En d'autres termes, le concepteur Web précise qu'une certaine police fait 12 pts (c'est-à-dire 1/6 de pouce ou 4,2 mm). En fait, lorsque vous mesurez l'écran, il est presque impossible d'être exactement de 12 pts, mais seulement 16 px proche de 12 pts (). converti selon 96DPI) . Si le pas de votre écran est de 0,29 mm, il est en réalité de 4,64 mm ou 13,15 pt. Si vous changez le bureau en une grande police (120 DPI), les 12 pts finaux équivaut à 20 px. Selon le pas de point de 0,29 mm, l'effet final est de 16,44 pt.

Dans le passé, il était recommandé aux concepteurs de sites Web de ne pas utiliser px. L'une des raisons est que les utilisateurs peuvent ajuster le DPI du bureau en fonction de leurs propres besoins, contrôlant ainsi la longueur réelle de la longueur absolue (vire-langue).

Cependant, c'est en fait suspect. Étant donné que la longueur réelle de la longueur absolue peut être ajustée selon les besoins, il n'y a aucune raison pour qu'une longueur relative telle que px ne puisse pas être ajustée selon les besoins. Tout comme lorsqu'une photo est réellement imprimée, vous pouvez bien sûr la redimensionner selon vos besoins, les polices et les images définies en px peuvent être mises à l'échelle lorsqu'elles sont réellement affichées - alors le 1px spécifié par le concepteur Web ne correspond plus au 1px du bureau de l'utilisateur, au lieu de cela, cela pourrait correspondre à 1,2 px ou 1,5 px ou à d'autres valeurs.

Dans le passé, l'option permettant d'ajuster la taille de la police dans les navigateurs n'était efficace que pour la longueur absolue (équivalent à ajuster le DPI dans le navigateur) et n'était pas efficace pour les px. Cela ne peut être considéré que comme un problème de conception des navigateurs précédents. , pas un problème inhérent à px. Les navigateurs prennent désormais en charge la mise à l'échelle des polices définies en px. Comme Firefox, les utilisateurs peuvent également choisir de redimensionner les polices uniquement ou également les images. Par conséquent, il est tout à fait réalisable d'utiliser tous les px "conception précise au niveau des pixels", et c'est également une méthode de conception raisonnable à mon avis. Après tout, px en CSS est destiné à garantir une expérience de lecture cohérente. Quant à savoir s'il s'agit d'une mise en page fluide ou fixe, et si elle peut s'adapter à différentes résolutions, c'est un autre sujet, et ce n'est pas directement lié à l'utilisation ou non de px comme unité.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!