Unités rem en CSS

Les unités em ne sont pas toujours pratiques. Le problème est que si vous changez la taille de la police d'une balise, elle changera également pour toutes ses balises descendantes, qui calculent leur taille par rapport à elle.

C'est pourquoi les unités rem ont été introduites. Les valeurs de ces unités sont toujours calculées par rapport à la taille de la police définie pour la balise html.

Comme vous le savez déjà, par défaut cette valeur est de 16px :

html {
	font-size: 16px;
}

Regardons un exemple. Supposons que nous ayons les balises suivantes :

<div>
	<p>
		text
	</p>
</div>

Définissons leurs tailles en rem :

div {
	font-size: 2rem; /* correspond à 32px */
}
p {
	font-size: 2rem; /* correspond à 32px */
	margin: 2rem;    /* correspond à 32px */
}

Supposons que nous ayons un code HTML, pour lequel nous résoudrons des problèmes :

<main>
	<h1>header</h1>
	<section>
		<h2>header</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
	<section>
		<h2>header</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
</main>

Reconvertissez en rem toutes les unités définies en pixels :

main {
	margin: 4rem auto 2rem;
}

h1 {
	font-size: 2rem;
}
section {
	font-size: 1rem;
	margin-bottom: 2rem;
}
h2 {
	font-size: 1.5rem;
	margin-bottom: 2rem;
}
p {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
}