Guide de l'unité CSS: CSS em, rem, vh, vw et plus, expliqué

Programmation

Unités

De nombreuses propriétés CSS aiment width, margin, padding, font-sizeetc. prendre la longueur. CSS a un moyen d'exprimer la longueur en plusieurs unités. La longueur est une combinaison d'un nombre et d'une unité sans espace. Par exemple 5px, 0.9emetc.

Longueur

Unités de longueur communes

Il existe plusieurs unités utilisées par CSS pour exprimer la longueur. Les plus anciens, pris en charge par tous les navigateurs, sont:

  • rem - «r» signifie «root»: «root em» -, qui est égal à la taille de police fixée à l'élément racine (presque toujours).
  • vh et vw - De nombreuses techniques de conception Web réactive reposent fortement sur des règles de pourcentage. Cependant, les mesures de pourcentage CSS ne sont pas toujours la meilleure solution pour tous les problèmes. La mesure vh est égale à 1/100 de la hauteur de la fenêtre. Ainsi, par exemple, si la hauteur du navigateur est de 800px, 1vh équivaut à 8px et, de même, si la largeur de la fenêtre est de 650px, 1vw équivaut à 6,5px.
  • vmin et vmax - Ces unités sont liées à la valeur maximale ou minimale de vh et vw . Par exemple, si le navigateur était défini sur une largeur de 1 200 pixels et une hauteur de 600 pixels, 1vmin serait 6px et 1vmax serait 12px. Cependant, si la largeur était définie sur 700 pixels et la hauteur sur 1080 pixels, vmin serait égal à 7 pixels et vmax 10,8 pixels.
  • ex et ch - Ces unités, similaires à em et rem , dépendent de la police et de la taille de police actuelles. Cependant, contrairement à em et rem , ces unités s'appuient également surfont-familycar elles sont déterminées en fonction de mesures spécifiques à chaque police. L'unité ch («unité de caractère») est définie comme la largeur du caractère zéro («0»). L'unité ex est définie comme «la hauteur d'x actuelle de la police actuelle ou la moitié de 1em». La hauteur x d'une police donnée est la hauteur du «x» minuscule de cette police. C'est souvent la marque du milieu de la police.

Il existe deux types généraux d'unités utilisées pour la longueur et la taille dans CSS: relative et absolue.

Unités relatives

Les unités relatives changent par rapport à la taille de police actuelle de l'élément ou à d'autres paramètres. Certaines unités relatives sont

em

  • la largeur d'une lettre majuscule M de l' font-sizeélément courant.
  • Les tailles de police sont héritées des éléments parents.

Exemple:

div { font-size: 16px; } div h3 { font-size: 2rem; }

Ici le

sera égal 32pxpuisque le font-sizede l'élément courant ou parent est 16px.

rem

  • racine em, ou la largeur d'une lettre majuscule M de la base par défaut font-size.
  • Les tailles de police parentes n'auront aucun effet.

Exemple:

body { font-size: 16px; } p { font-size: 1.5rem; }

Ici le

sera égal 24pxpuisque la base par défaut font-sizeest 16px.

%

  • la taille en pourcentage par rapport à la taille d'un parent.

Exemple:

div { width: 400px; } div p { width: 75%; }

Puisque la largeur du parent est 400px, la largeur du pargraphe intérieur serait 300px, ou 75% de 400px.

vw

  • largeur de la vue, ou 1 / 100e de la largeur de la fenêtre

Exemple:

body { width: 100vw; }

Le bodyremplissage de la largeur de la fenêtre, que ce soit 417px, 690px, ou de toute largeur.

vh

  • hauteur de la vue, ou 1 / 100e de la hauteur de la fenêtre

Exemple:

div { height: 50vh; }

Cela divremplira la moitié de la hauteur de la fenêtre, que ce soit 1080px, 1300px ou n'importe quelle hauteur.

Unités absolues

Les unités absolues seront les mêmes quelle que soit la taille de l'écran ou d'autres paramètres. Certaines unités absolues sont

px

  • pixel
  • le nombre de pixels est relatif à la qualité de l'écran de l'appareil de visualisation

in, cm,mm

  • pouce, centimètre, millimètre
  • Un pouce est un pouce sur un petit écran ou un grand écran

pt, pc

  • points (1/72 de pouce) et picas (12 points)

Exemple

p { font-size: 24px; } div { width: 3in; border-width: 3pt; }

Un paragraphe avec font-size: 24pxapparaîtra au format 24 pixels sur un écran de téléphone, de tablette ou de bureau.

Le divsera affiché comme 3 pouces de large, et le bordersur le divaura 3/72 de pouce d'épaisseur, quelle que soit la taille de l'écran.