Conversion des unités EM en valeurs décimales

L'unité em comme unité décimale
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre le Responsive Design
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de :

  • Comprendre l'importance de la conversion des unités EM en valeurs décimales
  • Savoir comment appliquer une référence de 10 pixels dans les feuilles de style CSS
  • Apprendre à modifier les tailles d'éléments en utilisant des unités EM

Découvrez comment transformer les unités EM en valeurs décimales pour une meilleure gestion des tailles dans vos feuilles de style CSS.

Dans cette leçon, nous explorons le processus de conversion des unités EM en valeurs décimales, afin de faciliter la gestion des tailles dans les fichiers CSS. L'unité EM est généralement basée sur la taille d'un paragraphe, souvent de 16 pixels. Nous verrons comment ramener cette unité à une référence de 10 pixels en utilisant un ratio de 62,5%, qui simplifie la conversion. Par exemple, un élément de 14 pixels peut être facilement converti en utilisant une valeur de 1.4 EM lorsque la référence est à 10 pixels.

Nous discuterons également de l'importance d'ajuster la taille de police par défaut dans les éléments parent, tels que le body ou le html, pour garantir une conversion homogène. En définissant le font-size à 62,5% dans le body, toutes les unités EM peuvent être simplifiées en les divisant directement par 10 par rapport aux pixels.

Voir plus
Questions réponses
Pourquoi utiliser une référence de 10 pixels pour la conversion des unités EM ?
Utiliser une référence de 10 pixels simplifie la conversion des tailles en EM en permettant de diviser directement les valeurs en pixels par 10.
Comment définir la taille de police par défaut dans le body pour utiliser des unités EM simplifiées ?
Vous pouvez le faire en définissant la propriété font-size à 62,5% dans le body, ce qui ramène la taille de référence à 10 pixels si la taille par défaut du paragraphe est de 16 pixels.
Quelle est la conversion d'un élément de 14 pixels en unités EM avec une référence de 10 pixels ?
Avec une référence de 10 pixels, un élément de 14 pixels serait converti en 1.4 EM.
Dans cette leçon, nous allons voir comment transformer l'unité en m en valeur décimale. L'unité EM a pour référence la taille d'un paragraphe, qui, nous l'avons vu, est généralement encore de 16 pixels. Pour ramener cette unité EM en valeur de 10, il suffit pour cela de ramener la valeur de référence sur une valeur égale à 10 pixels. En effet, si nous divisons 10 par 16, nous ramenons l'unité de référence du paragraphe, qui était précédemment à 16, sur une valeur de 10. 10 divisé par 16 nous donne un pourcentage de 62,5. Nous allons travailler sur cette page. La page HTML est écrite ci-dessous. Il reste encore quelques valeurs en pixels à l'intérieur de cette page. Nous allons essayer de les exprimer en EM et en valeur de 10. Pour cela, je m'adresse à l'élément le plus haut placé dans la hiérarchie. Il a peut-être Body, mais on pourrait utiliser également HTML. Et je lui indique que l'ensemble des font-size de tous les éléments ont une valeur de 62,5%. Ainsi, j'amène un paragraphe, qui initialement avait un corps 16, sur un corps 10. Il est alors très facile de modifier le font-size de cet élément A. Puisque nous avons un élément qui fait ici 14 pixels par rapport à 16, mais nous souhaitons avoir, grâce à font-size 62, cet élément 14 pixels par rapport à 10. Et donc, il suffit d'écrire 1.4 EM. J'enregistre et je regarde tout de suite dans mon navigateur. Donc là, pour l'instant, nous avons encore une taille de 14 pixels. J'actualise. Et voici, nous avons à présent notre taille qui n'a pas changé au niveau de la police. Nous allons ré-étirer la chose. Avec la margin top de notre recherche, donc 15 pixels, 1.5 EM. On enregistre et on regarde. Voici, il ne s'est absolument rien passé. Nous avons donc parfaitement traduit les valeurs en pixels, en EM, mais en puissance de 10. Je peux également utiliser, pour réaliser cela, donc cela fera maintenant 2.5 EM. Voici. Il est donc tout à fait possible, et donc très facile, d'utiliser ces unités EM si l'on les ramène à une puissance de 10. Simplement, pour rappel, il suffit à l'intérieur de l'élément body d'ajouter la propriété font-size 62.5%, ce qui ramènera donc une valeur de p initialement de 16 sur 10. Et donc, chaque élément EM sera simplement la même valeur que celle en pixels divisée par 10.

Programme détaillé de la formation

Nos dernières formations WebDesign UX / UI