Explication détaillée de l'utilisation de px, em et rem en CSS

Je pense que chaque ingénieur front-end a cette expérience. La plupart des concepteurs nationaux aiment utiliser px, tandis que la plupart des sites Web étrangers aiment utiliser em et rem. Alors, quelle est la différence entre les trois et quels sont les avantages et les inconvénients de ceux-ci. chaque? ? Dans l'article suivant, l'éditeur vous donnera une introduction détaillée aux différences entre px, em et rem en CSS. Les amis dans le besoin peuvent s'y référer.

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 équivaudrait à 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 parce que hérite de . 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, à moins qu'elle ne soit explicitement remplacée par une unité spécifique.

Pourquoi utiliser les unités rem :

La plus grande puissance fournie par les unités Rem 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 les unités em

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

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

Par exemple, vous pouvez utiliser les valeurs em pour définir le remplissage, la marge, la hauteur de ligne, etc. du menu navigation article. 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment CSS gère le style par défaut du navigateur

CSS implémente une barre de progression visible avec un processus de flèche

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!