ATOZ CSS Astuce rapide: avantages des valeurs REM et EM

Points clés

• L'utilisation d'unités relatives telles que "EM" pour définir la taille du texte et l'espacement interne et externe des éléments est plus flexible que l'utilisation de pixels, en particulier dans les projets réactifs. Cependant, les unités "EM" peuvent causer des problèmes avec des éléments imbriqués, ce qui les a fait croître ou rétrécir de façon exponentielle à chaque niveau de nidification.
• "REM" L'unité est une alternative plus fiable au réglage de la taille de la police, car elle est toujours calculée en fonction de la taille de la police de l'élément racine. Cela évite la croissance exponentielle ou le retrait qui se produit lors de l'utilisation d'unités "EM" dans des éléments imbriqués.
• Pour le support du navigateur, en particulier pour les anciennes versions d'Internet Explorer, vous pouvez utiliser des alternatives JS Polyfill ou PX. Si vous utilisez SASS, vous pouvez créer une macro hybride et une fonction pour calculer la taille REM requise et fournir automatiquement un plan de sauvegarde.

Cet article fait partie de notre série Atoz CSS. Vous pouvez trouver d'autres entrées pour la série ici. Vous pouvez afficher le texte intégral et les captures d'écran de leurs vidéos correspondantes (vidéos sur :required pseudo-classes) ici.

Bienvenue dans notre série Atoz CSS! Dans cette série, j'explorerai différentes valeurs (et propriétés) de CSS, chacune commençant par différentes lettres dans l'alphabet. Nous savons que parfois les captures d'écran ne sont pas suffisantes, donc dans cet article, nous avons ajouté quelques conseils rapides sur l'utilisation des valeurs REM et EM.

r signifie rem et em

Dans la vidéo de capture d'écran initiale, nous avons appris la pseudo-classe :required, qui peut être utilisée pour styliser les formulaires où les champs doivent être remplis.

Les formulaires, la vérification et le statut de style sont des sujets importants, mais nous n'avons pas beaucoup manqué lorsque nous avons discuté pour la première fois :required. Jetons donc un coup d'œil à quelques conseils rapides pour utiliser l'unité REM de mesure. Mais d'abord, regardons une autre unité relative: Em.

Avantages et inconvénients de l'utilisation d'em

Lorsque vous travaillez avec des éléments réactifs, l'utilisation d'unités relatives telles que EM pour définir la taille du texte et l'espacement interne et externe des éléments sont plus flexibles que l'utilisation de pixels. En effet, cette unité permet à la taille, à l'espacement et au contenu du texte de l'élément de croître proportionnellement avec la taille de la police de l'élément parent par rapport à la taille de la police de son élément parent.

Utiliser ces unités relatives, vous pouvez construire un système d'échelle où la modification de la valeur de taille de police d'un élément a un effet en cascade sur les éléments enfants en son sein. Le système proportionnel est une bonne chose, mais ce comportement de EM a des inconvénients.

Considérons l'extrait de code HTML suivant:

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

Cette liste imbriquée n'est pas la chose la plus courante au monde, mais elle est susceptible d'apparaître dans les pages de termes et conditions ou d'autres types de documents officiels.

Si nous voulons que l'élément de liste se démarque, nous pouvons régler sa taille de police à 1,5 fois la taille de référence 16px.

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

mais cela provoque des problèmes avec les LIS imbriqués, car ils auront également 1,5 fois la taille de leurs éléments parents. Les éléments imbriqués seront 1,5 fois supérieurs à 24px, plutôt que 1,5 fois supérieurs à 16px. Le résultat est que tout élément de liste imbriqué se développera de façon exponentielle à chaque niveau de nidification. Ce n'est peut-être pas le résultat que le designer veut!

Des problèmes similaires se produisent également lorsque les éléments imbriqués et les valeurs EM sont inférieurs à 1. Dans ce cas, tous les éléments imbriqués diminueront constamment à chaque niveau de nidification.

Alors que devons-nous faire?

Utilisez REM pour définir la taille du texte

Pour éviter que la taille de la police augmente ou diminue, nous pouvons utiliser des unités alternatives.

Nous pouvons utiliser des pixels, mais comme mentionné précédemment, les unités relatives sont plus flexibles dans les projets réactifs. Au lieu de cela, nous pouvons utiliser des unités REM car cela est toujours basé sur la taille de la police de l'élément racine, qui dans le cas d'un site Web ou d'une application Web est généralement un élément HTML. Dans les documents .svg ou .xml, les éléments racinaires peuvent être différents, mais ces types de documents sont en dehors de notre portée actuelle.

Si nous utilisons REM pour définir la taille de la police, cela ne signifie pas que EM ne sera jamais utilisé. J'ai tendance à les utiliser pour régler le rembourrage à l'intérieur de l'élément afin que l'espacement soit toujours relatif à la taille du texte.

Utilisez SASS pour aider à la prise en charge du navigateur REM

Les unités REM ne sont prises en charge que de IE9 et plus tard. Si vous avez besoin d'une prise en charge de IE8 (ou plus tôt), vous pouvez utiliser JS Polyfill ou fournir une alternative PX comme suit:

li {
  font-size: 1.5em; /* 24px/16px */
}

Si vous utilisez SASS, vous pouvez créer une macro hybride et une fonction pour calculer la taille REM requise et fournir automatiquement des solutions alternatives.

li {
  font-size: 24px;
  font-size: 1.5rem;
}

c'est tout. Quelques conseils rapides sur l'utilisation de REM. Si vous ne les utilisez pas dans votre projet actuel, je vous recommande fortement de l'essayer.

FAQ pour les valeurs REM et EM dans CSS

Quelles sont les principales différences entre REM et EM dans CSS?

La principale différence entre REM et EM dans CSS est qu'ils calculent le point de référence de la taille. EM la taille de la police par rapport à son élément parent ou à son élément actuel le plus proche. Cela signifie que si vous nichez des éléments, chacun les utilisant pour définir la taille de la police, les tailles seront aggravées et peuvent rapidement devenir difficiles à contrôler. D'un autre côté, REM est relatif à l'élément racine (ou à l'élément HTML). Cela signifie que peu importe la profondeur de l'élément imbriqué, si vous définissez sa taille de police en utilisant REM, il référenra la taille de la police de l'élément HTML, donnant une taille cohérente sur votre site Web.

Quand dois-je utiliser REM au lieu de EM dans CSS?

REM est généralement utilisé lorsque vous souhaitez créer un redimensionnement cohérent et prévisible sur votre site Web. Parce que REM est relatif à l'élément racine, la redimensionnement restera cohérente, quelle que soit la profondeur de votre élément imbriqué. Ceci est particulièrement utile pour construire des conceptions réactives où la cohérence et la prévisibilité sont essentielles. Cependant, lorsque vous souhaitez créer une conception plus dynamique et évolutive, vous pouvez les utiliser où la taille de l'élément est relative à son parent.

Comment convertir les pixels en REM ou EM dans CSS?

Pour convertir des pixels en REM ou EM, vous devez d'abord connaître la taille de la police de référence du document. Ceci est généralement défini sur l'élément HTML, généralement 16px, mais peut être n'importe quelle valeur. Une fois la taille de la police de référence connue, la valeur REM ou EM peut être calculée en divisant la valeur de pixel souhaitée par la taille de la police de référence. Par exemple, si la taille de votre police de référence est de 16px et que vous voulez une taille de police de 24px, le calcul est 24/16 = 1,5rem ou 1,5em.

Les unités REM et EM peuvent-elles être utilisées de manière interchangeable?

Bien que les unités REM et EM puissent être utilisées pour définir des tailles dans CSS, elles ne peuvent pas être utilisées de manière interchangeable en raison de leurs différents points de référence. La REM est toujours relative à l'élément racine, tandis que EM est relatif à l'élément parent le plus proche ou à l'élément actuel. Cela signifie que la même valeur REM ou EM peut entraîner différentes tailles en fonction du contexte qu'il est utilisé.

Comment la compatibilité du navigateur affecte-t-elle l'utilisation des unités REM et EM?

Les unités REM et EM sont bien prises en charge dans tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, si vous avez besoin de prendre en charge les anciennes versions d'Internet Explorer (c'est-à-dire 8 ou plus tôt), vous devez savoir que ces navigateurs ne prennent pas en charge les unités REM. Dans ce cas, vous devrez peut-être utiliser un plan de sauvegarde de pixels ou envisager d'utiliser une unité EM, qui a un support de navigateur plus large.

Comment les unités REM et EM affectent-elles l'accessibilité?

Les unités REM et EM peuvent considérablement améliorer l'accessibilité de votre site Web en facilitant l'échelle et la réponse aux paramètres des utilisateurs. Étant donné que ces unités sont relatives, ils permettent aux utilisateurs d'ajuster la taille de la police de base en fonction de leurs préférences sans casser la disposition. Cela est particulièrement bénéfique pour les utilisateurs contre visuellement qui peuvent avoir besoin d'augmenter la taille des polices pour une plus grande lisibilité.

Quelles sont les meilleures pratiques pour utiliser les unités REM et EM?

La meilleure pratique consiste à utiliser les unités REM pour définir la taille des polices, les marges et le rembourrage pour assurer la cohérence sur le site Web. Vous pouvez utiliser des unités EM pour les éléments qui doivent être mis à l'échelle avec leurs éléments parents, tels que les menus déroulants ou les infractions. C'est également une bonne idée de définir la taille de la police de référence en pourcentage de l'élément HTML, qui permet aux utilisateurs d'ajuster la taille de la police de référence en fonction de leurs préférences.

Comment fonctionnent les unités REM et EM avec les requêtes médiatiques?

Les unités REM et EM peuvent être utilisées dans les requêtes multimédias comme n'importe quelle autre unité. Cependant, comme ces unités sont relatives, elles peuvent rendre vos requêtes médiatiques plus flexibles et réactives. Par exemple, si vous définissez des points d'arrêt à l'aide d'unités EM, ils évolueront avec la taille de la police de base, permettant à votre disposition de s'adapter aux paramètres utilisateur.

Puis-je utiliser des unités REM et EM pour des éléments autres que le texte?

Oui, les unités REM et EM peuvent être utilisées pour n'importe quelle définition de taille dans CSS, pas seulement le texte. Cela comprend la largeur, la hauteur, le remplissage, la marge, la largeur de la frontière et même le positionnement. L'utilisation d'unités REM et EM pour ces propriétés peut rendre votre disposition plus flexible et réactive.

Comment gérer les éléments imbriqués lorsque vous utilisez des unités EM?

Les éléments imbriqués peuvent être un défi lors de l'utilisation d'unités EM car les tailles seront aggravées. Une façon de gérer cela est de réinitialiser la taille de la police de l'élément imbriqué à 1EM, ce qui le rendra égal à la taille de la police de son élément parent. Alternativement, vous pouvez utiliser des unités REM pour les éléments imbriqués pour assurer la cohérence de la redimensionnement.

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!