Leçon 15/26

Dans les exercices précédents, vous avez utilisé l'unité px (pour "pixels") pour définir la taille d'une police. Par exemple :

p {
        font-size: 10px;
  }

Un pixel est un point sur votre écran d'ordinateur. Spécifier la taille de police en pixels, c'est très bien si vous voulez que les visiteurs de votre site web voient exactement la même chose que ce qui est affiché sur votre propre écran.

Mais que se passe-t-il si des utilisateurs consultent votre site sur un écran ayant des dimensions très différentes du vôtre, celui d'un smartphone ou d'une tablette par exemple ? C'est ici qu'entrent en scène les em (à ne pas confondre avec les balises ‹em›‹/em› utilisées pour mettre du texte en italique dans le HTML).

L'unité de mesure em est une mesure relative : 1em est égal à la taille de police par défaut de l'écran utilisé. C'est donc parfait pour les smartphones par exemple puisque la taille affichée des textes dépend de la taille de l'écran du smartphone utilisé et non de la taille absolue de vos polices (celle que vous avez choisie quand vous avez codé votre site web).

Une taille de police en em dit seulement : "Hey, 1em, c'est la taille de police utilisée normalement ; la valeur 2em correspond à une taille de police deux fois plus grande ; la valeur 0.5em correspond à une taille de police deux fois plus petite !".

Testons tout cela ! Nous avons créé trois paragraphes différents avec des tailles de police (font-size) égales à 1em, 0.5em et 2em. Désormais, vous pouvez utiliser soit px soit em comme unités de mesure. Nous voulions seulement vous montrer ce qu'étaient les em pour que vous ne soyez pas surpris quand vous en rencontrerez plus tard.