En CSS, choisir l'unité appropriée pour obtenirun design responsive,etet l'utilisabilitéest crucial.
px、emetremsont les trois unités de longueur les plus couramment utilisées. Leur principale différence réside dansle repère de référencequi est différent.
1. px (Pixel - Pixel)
pxest uneunité absolue(sur les écrans). Elle représente un point pixel physique à l'écran.
- Caractéristiques: taille fixe, ne change pas avec les paramètres du navigateur ni avec la taille de police de l'élément parent.
- Avantages: précis, facile à contrôler, adapté aux scénarios nécessitant un alignement "au pixel près" (comme les lignes de bordure, les petites icônes).
- Inconvénients: manque de flexibilité, peu propice à une mise en page réactive. Si l'utilisateur agrandit la police dans le navigateur, les mises en page utilisant
pxrisquent de ne pas s'ajuster en conséquence.
2. em (Relatif à l'élément - Unité relative)
emest uneunité relative, et sa référence est celle de l'élément actuelou de l'élément parenttaille de police (font-size).
- Règles de calcul：
- Si utilisé sur
font-size, la référence est, pour l'élément parent, lataille de police. - S'il est utilisé sur d'autres propriétés (telles que
width、padding、margin), la référence est lataille de policepropre de l'élément courant.
- Inconvénient : effet d'empilement composé. Si plusieurs couches sont imbriquées et utilisent toutes
em, le calcul devient très complexe.
Exemple :
Si l'élément parent est20px, et que l'élément enfant est défini surfont-size: 1.5em;, alors la taille réelle de l'élément enfant est .
3. rem (Root em - Unité relative à la racine)
remest aussi uneunité relative, mais elle fait uniquement référence à l'élément racine(c'est-à-dire la<html>balise) taille de police.
- Règle de calcul: Quel que soit le niveau d'imbrication des éléments,
1remest toujours égal à<html>defont-size。 - Avantages：
- Prévisibilité élevée: Évite
emle problème d'empilement et d'imbrication de em. - Adapté au responsive: Il suffit de modifier
htmlla taille de police de l'élément racine, et la mise en page de toute la pagerems'adaptera proportionnellement.
- Valeur par défaut: La taille de police racine par défaut de la plupart des navigateurs est
16px, donc par défaut1rem = 16px。
Tableau comparatif des différences fondamentales
| Unit | Type | Référence | Scénarios applicables |
|---|---|---|---|
| px | Unité absolue | Pixel physique d'écran | Bordures, ombres, éléments qui n'ont pas besoin d'être mis à l'échelle |
| em | Unité relative | Taille de police de l'élément courant/parent | Mise à l'échelle des composants locaux (par ex., les marges des boutons changent avec la taille du texte) |
| rem | Unité relative | <html>Taille de police de l'élément racine |
Mise en page globale, espacement, typographie adaptative |
Résumé et recommandations
- Premier choix :
remPour la typographie et la mise en page: Cela garantit que votre page web peut s'adapter harmonieusement lorsque les utilisateurs ajustent la taille de police du navigateur. - Deuxième choix :
pxPour les détails fixes: Par exemple,1pxles lignes de bordure, que vous ne voulez pas voir devenir floues ou disparaître à cause de la mise à l'échelle. - À utiliser avec parcimonie :
emUniquement pour un usage local: N'envisagez d'utiliser em que lorsqu'un Padding ou Margin d'un élément doit évoluer de manière synchrone avec la taille du texte de l'élément (par ex., des boutons adaptatifs).em。
Un petit conseil :
Pour faciliter le calcul, de nombreux développeurs définissenthtmlla taille de police de l'élément racine à62.5%(c'est-à-dire, ). Ainsi, lors de l'écriture du code,1.4remcorrespond directement à14px, simple et intuitif.