La différence entre px, em et rem en CSS

Préface

em et rem sont des unités flexibles et évolutives, converties par le navigateur en valeurs de pixels, en fonction de la taille de la police dans le design, si vous utilisez la valeur 1em Ou 1rem, qui peut être converti par le navigateur de 16px en 160px ou toute autre valeur. Les navigateurs utilisent 1px , donc 1px apparaît toujours comme exactement 1px.

Les similitudes entre em et rem

L'utilisation d'unités em et rem peut rendre notre conception plus flexible et contrôler la mise à l'échelle globale des éléments au lieu de tailles fixes

La différence entre em et rem

La différence réside dans la personne que le navigateur convertit en valeur px

Comment l'unité rem est convertie en valeur de pixel

Lors de l'utilisation d'unités rem, leur conversion en taille de pixel dépend de la taille de la police de l'élément racine de la page, c'est-à-dire de la taille de la police de l'élément html. La taille de la police de l'élément racine est multipliée par votre valeur rem.

Par exemple, un élément racine avec une taille de police de 16px, 10rem serait équivalent à 160px, soit 10 x 16 = 160.

Comment les unités em sont converties en valeurs de pixels

Lors de l'utilisation des unités em, la valeur du pixel sera la valeur em multipliée par la taille de la police de l'élément utilisant unités em. Par exemple, si un p a une taille de police de 18 px, 10em équivaudra à 180 px, soit 10 × 18 = 180.

Points clés à comprendre :

Il existe un malentendu courant selon lequel l'unité em est la taille de la police par rapport à l'élément parent. En fait, selon la norme W3, elles sont relatives à la taille de la police de l'élément en utilisant les unités em. La taille de la police de l'élément parent peut affecter la valeur em, mais cela se produit uniquement à cause de l'héritage. Voyons pourquoi et comment cela fonctionne.

Ce que vous devez savoir :

L'élément html racine héritera de la taille de police définie dans le navigateur, à moins qu'une valeur fixe ne soit explicitement définie pour la remplacer. Ainsi, bien que la taille de la police de l'élément html soit directement déterminée par la valeur rem, la taille de la police peut d'abord provenir des paramètres du navigateur. Ainsi, le paramètre de taille de police du navigateur peut affecter chaque valeur qui utilise les unités rem et chaque valeur héritée des unités em.

Résumé des différences avec rem em

Tout ce qui précède se résume à ceci :

1. unités rem traduites en valeurs de pixels ​​sont représentés par des éléments HTML déterminés par la taille de la police. Cette taille de police est affectée par le paramètre de taille de police dans le navigateur, sauf si une unité spécifique est explicitement remplacée.
   

2. les unités em sont converties en valeurs de pixels, en fonction de la taille de police qu'elles utilisent. Cette taille de police est régie par la taille de police héritée de l'élément parent, sauf si elle est explicitement remplacée par une unité spécifique.
   

Pourquoi utiliser les unités rem :

Les unités Rem fournissent la plus grande puissance et ce n'est pas seulement qu'elles fournissent une taille constante plutôt qu'un héritage . Au lieu de cela, cela nous donne un moyen d'obtenir les préférences de l'utilisateur et d'influencer la taille des éléments en utilisant rem partout sur le site Web, au lieu d'utiliser des unités px fixes.
Pour cette raison, l'objectif principal de l'utilisation des unités rem devrait être de garantir que nos mises en page se redimensionnent à la bonne taille, quelle que soit la façon dont les utilisateurs configurent leur navigateur.

Pourquoi utiliser l'unité em

L'unité em dépend d'une valeur de taille de police plutôt que de la taille de police de l'élément html.

À cette fin, l'objectif principal de l'unité em devrait être de permettre à l'extensibilité de rester dans le cadre d'un élément de conception spécifique.

Par exemple, vous pouvez utiliser la valeur em pour définir le remplissage, la marge, la hauteur de ligne et d'autres valeurs de l'élément de menu de navigation. Menu avec une taille de police de 0,9rem

De cette façon, si vous modifiez la taille de la police du menu, l'espacement autour des éléments du menu sera mis à l'échelle proportionnellement dans l'espace restant.

Résumé

Les unités rem et em sont des valeurs de pixels calculées par le navigateur en fonction de la taille de la police de votre conception.

les unités em sont basées sur la taille de la police de l'élément qui les utilise.

Les unités rem sont basées sur la taille de la police de l'élément html.

Les unités em peuvent être affectées par la taille de police héritée de l'élément parent.

Les unités rem peuvent hériter des tailles de police des paramètres de police du navigateur.

L'utilisation des unités em doit être basée sur la taille de police du composant plutôt que sur la taille de police de l'élément racine.

Utilisez rem lorsque vous n'avez pas besoin d'utiliser les unités em et que vous devez définir la mise à l'échelle en fonction de la taille de la police du navigateur.

Utilisez les unités rem sauf si vous êtes sûr d'avoir besoin d'unités em, y compris pour les tailles de police.

Utilisez les unités rem dans les requêtes multimédias

N'utilisez pas em ou rem dans les mises en page multi-colonnes - utilisez plutôt %.

N'utilisez pas em ou rem si la mise à l'échelle entraînera inévitablement la rupture des éléments de mise en page.

Pour plus d'articles liés aux différences entre px, em et rem en CSS, veuillez faire attention au site Web PHP chinois !