Les CSS peuvent-ils utiliser des unités de pixels ?

L'unité de pixel peut être utilisée en CSS ; l'unité de pixel fait référence à l'unité relative à la résolution de l'écran du moniteur et est une unité de longueur relative "px" est utilisée comme unité de pixel en CSS pour ajuster la taille ou l'espacement des éléments. . ;Cette longueur de pixel n'a rien à voir avec les pixels de l'écran de texte visibles sur le moniteur.

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

Les CSS peuvent-ils utiliser des unités de pixels

Les CSS peuvent-ils utiliser des unités de pixels

Le nom de l'unité px est pixel, le pixel (px) est relatif à la résolution de l'écran du moniteur, et cette longueur de pixel est liée à la longueur du pixel sur votre moniteur Le texte que vous voyez n'a rien à voir avec les pixels de l'écran.

Et c'est toujours une approximation sur un appareil précis (le principe est d'être au plus près du pixel de référence).

px est en fait une unité mesurée en degrés.

Les pixels sont une unité de longueur qui indique au navigateur comment redimensionner ou espacer les éléments.

px pixels (pixels CSS)

px est la longueur relative.

Pixel CSS :

Également connu sous le nom de pixel virtuel, pixel indépendant de l'appareil ou pixel logique, il peut également être compris comme pixel intuitif. Les pixels CSS sont un concept de programmation Web qui fait référence aux pixels logiques utilisés dans le code de style CSS. Par exemple, le nombre de pixels CSS de l'iPhone 6 est de 375 x 667 pixels.

Les pixels virtuels peuvent être compris comme des pixels « intuitifs », des unités abstraites utilisées par CSS et JS. Toutes les longueurs dans le navigateur sont en pixels CSS, et l'unité de pixels CSS est px.

Dans la spécification CSS, les unités de longueur peuvent être divisées en deux catégories, les unités absolues et les unités relatives. Px est une unité relative, par rapport aux pixels de l'appareil.

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, le pixel physique représenté par chaque pixel CSS peut changer ; les pixels représentés peuvent changer (c'est-à-dire le deuxième aspect de la relativité des pixels CSS

px est en fait l'abréviation de pixel, qui est l'unité de base de l'affichage de l'image et n'est ni une quantité physique définie ni un point A ou un petit) ; carré, mais un concept abstrait. Assurez-vous donc de comprendre son contexte lorsque vous parlez de pixels ! Assurez-vous de comprendre son contexte ! Assurez-vous de comprendre son contexte !

Prenons un exemple pour comprendre la relativité des pixels CSS

Supposons que nous ouvrions une page avec un navigateur PC. La largeur du navigateur à ce moment est de 800 px, et il y a également un conteneur d'éléments au niveau du bloc de 400 px de large. la page. Il est évident que le conteneur de blocs devrait occuper la moitié de la page à ce stade.

Mais si on zoome sur la page (via la "touche Ctrl" plus la touche "+"), le zoom est de 200%, soit le double de la taille originale. À ce stade, le conteneur de blocs occupe horizontalement tout le navigateur.

Le paradoxe est qu'à l'heure actuelle, nous n'avons ni redimensionné la fenêtre du navigateur ni modifié la largeur CSS de l'élément de bloc, mais il semble deux fois plus grand - c'est parce que nous avons agrandi les pixels CSS jusqu'à l'original deux fois.

Lorsque les pixels CSS ont la même taille que les pixels de l'écran à 1:1 :

Les pixels CSS (bordures noires) commencent à être étirés. À ce stade, 1 pixel CSS est plus grand que 1 pixel de l'écran

.

C'est-à-dire que la valeur par défaut Dans ce cas, un pixel CSS doit être égal à la largeur d'un pixel physique, mais l'opération d'agrandissement du navigateur rend un pixel CSS égal à la largeur de deux pixels de l'appareil. Vous verrez une situation plus compliquée plus tard. Sur les appareils à PPI élevé, les pixels CSS sont équivalents à la taille de plusieurs pixels physiques, même par défaut.

Comme vous pouvez le voir dans l'exemple ci-dessus, les pixels CSS ne sont toujours qu'une valeur relative.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo HTML)

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!