CSS - Unités de mesure

Lucas D. -

Unités absolues

Pixels (px)

Les pixels (px) sont une unité de taille fixe utilisée en CSS. Il s'agit de l'unité de mesure la plus basique et la plus largement prise en charge. Un pixel correspond généralement à un point unique sur l'écran, bien que cela puisse varier selon la résolution de l'écran de l'appareil. Les pixels sont utiles lorsque vous avez besoin d'un contrôle précis sur la taille et le positionnement des éléments.

Les avantages de l'utilisation des pixels incluent leur simplicité et leur cohérence entre les appareils. Ils permettent des mesures exactes et sont faciles à comprendre. Cependant, les pixels présentent quelques inconvénients. Ils ne s'adaptent pas bien lorsque l'utilisateur zoome ou dézoome la page, ce qui peut affecter l'accessibilité. L'utilisation de tailles fixes en pixels peut rendre plus difficile la création de designs responsifs qui s'adaptent à différentes tailles d'écran.

Points (pt)

Les points (pt) sont une autre unité de mesure absolue. Un point équivaut à 1/72 de pouce. Les points sont plus couramment utilisés dans les médias imprimés mais peuvent également être utilisés en CSS. Ils offrent un moyen de spécifier des tailles relatives à une unité de mesure fixe.

Comparés aux pixels, les points sont moins couramment utilisés sur le web. Ils peuvent être utiles lors de la création de styles pour des éléments qui seront imprimés, comme des factures ou des rapports. Cependant, les points n'offrent pas le même niveau de précision que les pixels et peuvent ne pas toujours s'afficher de manière cohérente sur différents appareils.

Pouces (in) et Centimètres (cm)

Les pouces (in) et les centimètres (cm) sont des unités absolues empruntées aux mesures physiques. Un pouce équivaut à 96 pixels à une résolution d'écran de 96 DPI (points par pouce). Les centimètres sont similaires, avec un centimètre équivalant à 37,8 pixels à 96 DPI.

Ces unités sont rarement utilisées en conception web car elles ne conviennent pas bien aux médias basés sur l'écran en raison des tailles et résolutions de moniteur variables, ce qui rend difficile de prédire comment les éléments mesurés en pouces ou en centimètres apparaîtront avec précision sur les écrans.

Unités relatives

Pourcentages (%)

Les pourcentages (%) sont des unités de mesure relatives en CSS. Ils définissent les tailles, l'espacement et le positionnement des éléments par rapport à leur conteneur parent. La taille d'un élément définie en pourcentages est calculée en fonction de la taille de son élément parent.

Conseil: Exemple de pourcentage

<div style="width: 50%;">Cette div occupe la moitié de la largeur de son conteneur parent.</div>

Em (em)

Em (em) est une unité relative basée sur la taille de police d'un élément. Un em équivaut à la taille de police de l'élément. Par exemple, si un élément a une taille de police de 16 pixels et que vous définissez le remplissage à 1em, le remplissage sera égal à 16 pixels.

Conseil: Exemple d'Em

<div style="font-size: 16px; padding: 1em;">Cette div a un remplissage égal à sa taille de police de 16 pixels.</div>

Rem (rem)

Rem (rem) est similaire à em mais est relatif à la taille de police de l'élément racine (généralement ). "Rem" signifie "root em".

La principale différence entre rem et em est que les unités rem sont toujours basées sur la taille de police racine, tandis que les unités em sont basées sur la taille de police propre à un élément. Cela rend les unités rem plus prévisibles et plus faciles à utiliser lors de la manipulation d'éléments imbriqués.

Conseil: Exemple de Rem

<div style="font-size: 16px;"> 
    <div style="font-size: 2rem;">La taille de police de cette div est deux fois celle de la police racine.</div>
</div>

Unités de fenêtre d'affichage (vw, vh, vmin, vmax)

Les unités de fenêtre d'affichage sont des mesures relatives basées sur la taille de la fenêtre d'affichage - la zone visible d'une page web :

  1. vw (largeur de la fenêtre d'affichage) : 1vw équivaut à 1% de la largeur de la fenêtre d'affichage.
  2. vh (hauteur de la fenêtre d'affichage) : 1vh équivaut à 1% de la hauteur de la fenêtre d'affichage.
  3. vmin (minimum de la fenêtre d'affichage) : 1vmin équivaut à la plus petite valeur entre vw ou vh.
  4. vmax (maximum de la fenêtre d'affichage) : 1vmax équivaut à la plus grande valeur entre vw ou vh.

Les unités de fenêtre d'affichage aident à créer des éléments qui s'adaptent aux dimensions de la fenêtre d'affichage, quelle que soit la taille de l'écran :

  • Définir la largeur d'un élément à 50vw lui fait occuper la moitié de la largeur de la fenêtre d'affichage.
  • Utile pour les sections plein écran ou la typographie responsive qui s'adapte à différents appareils et orientations.

Conseil: Exemple d'unités de fenêtre d'affichage

<div style="width: 50vw; height: 50vh;">Cette div occupe la moitié de la largeur et de la hauteur de la fenêtre d'affichage.</div>

Voici la traduction en français du texte fourni :

Quand utiliser chaque unité

Le choix de la bonne unité de mesure en CSS dépend de la situation et de la façon dont vous souhaitez que les éléments se comportent sur votre page web. Voici quelques conseils pour utiliser les unités absolues par rapport aux unités relatives :

Utilisez des unités absolues comme les pixels (px) lorsque vous avez besoin d'un contrôle exact sur les tailles et le positionnement des éléments. Les pixels sont utiles dans ces cas :

  • Créer des mises en page à largeur fixe
  • Définir les bordures et l'épaisseur des lignes
  • Spécifier les dimensions exactes des images et des éléments multimédia

Évitez d'utiliser des pixels pour les tailles de police, car ils ne s'adaptent pas bien lorsque l'utilisateur effectue un zoom avant ou arrière sur la page.

Utilisez des unités relatives comme les pourcentages (%) lorsque vous souhaitez que les éléments s'adaptent à la taille de leur conteneur parent. Les pourcentages sont utiles dans ces situations :

  • Créer des mises en page réactives qui s'ajustent à différentes tailles d'écran
  • Définir les largeurs et les hauteurs des éléments par rapport à leur parent
  • Positionner des éléments en utilisant des valeurs relatives (par exemple, left: 50%; top: 25%)

Utilisez les unités em lorsque vous souhaitez des tailles relatives à la taille de police d'un élément. Les unités em fonctionnent bien pour :

  • Définir les marges intérieures et extérieures qui s'adaptent à la taille de la police
  • Définir les tailles des éléments imbriqués qui héritent de la taille de police de leur parent
  • Créer une typographie évolutive qui maintient les proportions

Utilisez les unités rem lorsque vous souhaitez des tailles relatives à la taille de police de l'élément racine. Les unités rem sont utiles pour :

  • Définir les tailles de police et l'espacement de manière cohérente dans tout le document
  • Créer des composants évolutifs indépendants de la taille de police de leur parent
  • Maintenir des proportions cohérentes même si la taille de police racine change

Utilisez les unités de fenêtre d'affichage (vw, vh, vmin, vmax) lorsque vous souhaitez que les éléments s'adaptent à la taille de la fenêtre d'affichage. Les unités de fenêtre d'affichage sont bonnes pour :

  • Créer des sections plein écran ou des images d'en-tête
  • Rendre la typographie réactive sur différentes tailles d'écran
  • Définir les tailles et l'espacement en fonction des dimensions de la fenêtre d'affichage

Vous pouvez également combiner différentes unités de mesure pour des designs plus flexibles.

Conseil: Combiner des unités pour plus de flexibilité

<div style="width: 50%; border: 2px solid black; font-size: 1rem; padding: 1em;"> 
    Cet élément combine des pourcentages pour la largeur, des pixels pour l'épaisseur de la bordure, des rems pour la taille de police et des ems pour la marge intérieure.
</div>

Le choix de l'unité de mesure dépend des besoins de votre projet et du niveau de réactivité que vous souhaitez. Expérimentez avec différentes unités et combinaisons pour trouver ce qui fonctionne le mieux.