La première différence que nous remarquons est sans équivoque leur signification et leur
rôle.
Le
sigle px signifie pixel qui est une unité de taille
absolue. Les sigles em et rem sont des unités relatives.
On dit que quelque chose est relatif à autre chose. Pour comprendre cette notion importante, nous pourrions citer l'exemple d'un salaire de 2000 euros d'un employé X. Imaginons que le salaire d'un autre employé Y soit systématiquement supérieur à 50% du salaire de l'employé X. Le salaire Y est donc relatif au salaire X. Il sera pour le moment de 3000 euros, mais si celui de X augmente à 5000 euros celui de Y sera de 7500 euros (plus 50% de X).
Ainsi une unité relative l'est par rapport à une autre unité.
Nous allons tester les différences à partir d'un code HTML très simple.
<body>
<h1>Un titre</h1>
<p>Un paragraphe</p>
</body>L'utilisation de px est plutôt simple. On indique l'unité en pixel et cette unité ne bouge pas.
h1{
font-size:20px;
}
p{
font-size:16px;
}Cette unité est relative par rapport à l'unité du parent.
body {
font-size:20px;
}
h1{
font-size:1.5em;
}
p{
font-size:0.9em;
}Le parent dans l'exemple est "body" qui a comme mesure "18px". Le "h1" aura une taille relative à la taille "body". Dans notre exemple il mesurera 150% du "font-size" de "body" et sera donc plus grand de 50%. Pour "p" ce sera 90% et il sera donc 10% plus petit.
Si l'on change la taille de "body", les tailles de "h1" et de "p" vont augmenter ou diminuer automatiquement par rapport à "body".
Pour rem, le principe est identique, mais la taille sera relative non pas au parent le plus proche, mais à la taille racine du document.
Me parler :
Si vous souhaitez me contacter, vous pouvez accéder à la page d'accueil.
