Unités relatives : em et rem
Dimensionnez les éléments par rapport à la taille de police du parent ou de la racine avec les unités em et rem.
Unités relatives : em et rem est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Que sont les unités relatives ?
Les unités relatives s'adaptent en fonction d'une autre mesure, généralement la taille de police d'un élément ou de l'élément racine. Elles permettent de créer des conceptions adaptatives et évolutives qui respectent les paramètres de l'utilisateur.
em — Relatif à la taille de police du parent
em est relatif à la taille de police de l'élément courant (pour la propriété font-size elle-même) ou à l'élément parent (pour les autres propriétés). Cela peut provoquer une accumulation.
<div class="parent">
Parent (20px)
<div class="child">
Child (1.5em = 30px)
<div class="grandchild">Grandchild (1.5em = 45px!)</div>
</div>
</div>
em pour l'espacement
Lorsque em est utilisé pour padding, margin ou border-radius, il est relatif à la taille de police propre de l'élément. Cela crée des composants qui s'adaptent proportionnellement.
<button class="button">Padded Button</button>
rem — Relatif à la taille de police racine
rem (em racine) est relatif à la taille de police de l'élément racine (html). Il ne s'accumule jamais et reste prévisible sur toute la page.
<h1>Heading (2.5rem = 40px)</h1>
<p>Paragraph text (1rem = 16px)</p>
<small>Small print (0.75rem = 12px)</small>
rem et accessibilité de l'utilisateur
Si l'utilisateur augmente la taille de police de base du navigateur (par exemple de 16px à 20px pour améliorer la lisibilité), les unités rem s'adaptent en conséquence. Les unités fixes px ne s'adaptent pas. C'est pourquoi rem est fortement recommandé pour la typographie.
Taille de police de html en pourcentage
Définissez la taille de police racine en pourcentage afin de respecter les paramètres du navigateur de l'utilisateur :
<p>Root font-size respects the browser/user default (100%).</p>
Choisir entre em et rem
Guide pratique :
- Utilisez
rempour les tailles de police, les valeurs d'espacement et les mesures de mise en page - Utilisez
empour l'espacement interne d'un composant qui doit s'adapter à la taille de police du composant (par exemple, le remplissage d'un bouton)
em dans les requêtes média
Les requêtes média exprimées en em réagissent aux changements de taille de police du navigateur. Un point de rupture de 48em = 768px avec les paramètres par défaut, mais s'adapte si l'utilisateur a modifié la taille de police de base.
<div class="layout">
<div>Column A</div>
<div>Column B</div>
</div>
Calculer em
La formule est la suivante : desired px / parent px = em value. Si le parent fait 16px et que vous souhaitez un texte de 24px : 24/16 = 1.5em.
<h2>Heading (24px via 1.5rem)</h2>
<p>Paragraph (18px via 1.125rem)</p>
Le problème de l'accumulation de em
L'imbrication d'éléments dont la taille est exprimée en em entraîne une accumulation multiplicative de la taille de police. C'est pourquoi rem est privilégié pour la taille de police : il se réfère toujours à la racine et empêche cette accumulation.
ch — Largeur de caractère
L'unité ch équivaut à la largeur du caractère « 0 » dans la police courante. Elle est utile pour limiter la largeur des conteneurs de texte à des lignes faciles à lire :
<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>
Vérification rapide
Un bouton possède font-size: 1.25rem et padding: 0.5em. Si la taille de police racine est de 16px, quelle est la valeur du remplissage en pixels ?
Récapitulatif
em s'adapte en fonction de la taille de police de l'élément courant (ou du parent pour la propriété font-size elle-même) : il peut s'accumuler. rem s'adapte toujours en fonction de la racine et ne s'accumule jamais. Utilisez rem pour la typographie et l'espacement global ; utilisez em pour l'espacement interne proportionnel des composants.
Questions Fréquemment Posées
La leçon « Unités relatives : em et rem » est-elle gratuite ?
Oui — le texte complet de « Unités relatives : em et rem » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Unités relatives : em et rem » ?
Dimensionnez les éléments par rapport à la taille de police du parent ou de la racine avec les unités em et rem. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Unités relatives : em et rem » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Unités absolues : px, pt, cm
- Unités relatives : em et rem
- Unités de fenêtre d’affichage : vw, vh, dvh
- Fonctions Min, Max et Clamp