Chargement...

Unités CSS

Vous savez déjà écrire une déclaration comme color: teal. Les propriétés de taille demandent une deuxième idée : quelle grandeur. font-size: 16 seul est invalide pour la plupart des longueurs — le navigateur a besoin d’une unité pour savoir ce que signifie « 16 ».

Que sont les unités CSS ?

Les unités CSS sont les suffixes de mesure attachés aux valeurs de longueur — par exemple px, rem, %, vw et vh. Les unités absolues gardent la même taille quel que soit le parent. Les relatives s’adaptent à autre chose : la police de l’élément, la police racine, la taille du parent ou le viewport.

Absolu vs relatif en un coup d’œil

Utilisez ce tableau comme carte. Vous n’avez pas besoin de chaque unité le premier jour — apprenez les familles, puis pratiquez les unités du quotidien.

📊 Unités de longueur CSS courantes

Unité Famille Usage typique
px Absolue (pixels d’écran) Bordures, réglages fins d’icônes, traits 1px
rem Relative à la taille de police racine Texte de page et espacements cohérents
em Relative à la police de l’élément lui-même Padding qui grandit avec le texte local
% Relative à la taille du parent Largeurs fluides dans un conteneur
vw Relative à la largeur du viewport Sections pleine largeur (avec prudence)
vh Relative à la hauteur du viewport Hauteur de hero, panneaux plein écran

Pixels (px)

px est une unité absolue à l’écran. Prévisible pour les bordures fines et les petits détails fixes. Moins idéale comme seule unité pour toute la typographie d’un site responsive, car elle ne s’adapte pas automatiquement à la préférence de police racine de l’utilisateur comme peut le faire rem.

Tailles en pixels pour la bordure d’une carte

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 8px;
width: 320px;
}

Quand px brille encore

Préférez px pour les bordures très fines, les décalages d’ombre et le petit chrome d’interface à bord fixe. Préférez les unités relatives lorsque le design doit respirer avec la taille de police ou la largeur du conteneur.

rem et em

rem est relative à la taille de police de l’élément racine (souvent <html>). em est relative à la taille de police de l’élément courant (ou du parent, selon la propriété). Pour les débutants, rem est le défaut plus sûr pour font-size et beaucoup d’espacements, car elle reste cohérente dans les éléments imbriqués.

Typographie relative à la racine avec rem

css
CSS Code 
html {
font-size: 100%; /* often 16px in browsers */
}

.lead {
font-size: 1.25rem; /* ~20px if root is 16px */
margin-bottom: 0.75rem;
}

em en une phrase

Utilisez em lorsque vous voulez qu’une valeur suive la police locale — par exemple un padding qui grandit si le texte de ce composant augmente. Si des em imbriqués se multiplient et « s’emballent », passez ces tailles en rem.

Pourcentages (%)

Un pourcentage est relatif à une mesure du parent. Avec width: 50%, l’élément vise la moitié de la largeur du parent (lorsque le parent a une largeur définie). Les pourcentages sont l’outil classique des mises en page fluides dans un conteneur.

Largeur fluide avec pourcentage

css
CSS Code 
.sidebar {
width: 30%;
}

.main {
width: 70%;
}

Unités de viewport (vw et vh)

1vw vaut 1 % de la largeur du viewport ; 1vh vaut 1 % de la hauteur du viewport. Puissantes pour les heroes plein écran, mais faciles à abuser — un texte dimensionné uniquement en vw peut devenir illisible sur des écrans très larges ou très étroits.

Hauteur de viewport pour un hero

css
CSS Code 
.hero {
min-height: 80vh;
padding: 2rem;
}

Une habitude par défaut pratique

Habitude de départ : rem pour les tailles de police et la plupart des espacements verticaux, % ou outils de layout flexibles (plus tard : Flexbox/Grid) pour les largeurs, et px pour les bordures et petits détails fixes. Revenez aux unités de viewport pour les sections pleine largeur — pas pour chaque marge.

Essayez vous-même

  1. Créez une règle .card avec width: 80%, max-width: 24rem et border: 1px solid #94a3b8.
  2. Définissez .card h2 { font-size: 1.5rem; } et un court paragraphe à 1rem.
  3. Ajoutez une section .banner { min-height: 40vh; } au-dessus de la carte.
  4. Redimensionnez la fenêtre et changez html { font-size: … } racine pour sentir comment %, vh et rem réagissent différemment.
  5. Optionnel : convertissez le titre en 1.5em dans .card et notez si l’imbrication vous surprend.

Erreurs fréquentes

  • Écrire font-size: 16 sans unité — invalide pour les longueurs en CSS standard
  • N’utiliser que px pour chaque police sur un site qui devrait respecter zoom/préférences
  • Imbriquer beaucoup de em jusqu’à ce que le texte soit énorme ou minuscule
  • Fixer le texte du corps uniquement en vw et voir les lignes exploser sur grands moniteurs
  • Supposer qu’une hauteur % fonctionne alors que le parent n’a pas de hauteur explicite

Résumé

  • Les valeurs de longueur ont généralement besoin d’une unité (px, rem, %, vw, …)
  • Les absolues restent fixes ; les relatives s’adaptent à la police, au parent ou au viewport
  • Préférez rem pour la typo, %/systèmes de layout pour les largeurs, px pour les bordures fines
  • em suit la police locale ; vw/vh suivent le viewport
  • Choisissez l’unité selon la tâche — n’imposez pas une seule unité partout

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel