Unità rem in CSS

Le unità em non sono sempre convenienti. Il problema è che se si cambia la dimensione del carattere di un tag, essa cambierà anche per tutti i tag discendenti che calcolano la loro dimensione relativamente a lui.

Per questo motivo sono state introdotte le unità rem. I valori di queste unità sono sempre calcolati relativamente alla dimensione del carattere impostata per il tag html.

Come già sapete, per impostazione predefinita questo valore è pari a 16px:

html {
	font-size: 16px;
}

Vediamo un esempio. Supponiamo di avere i seguenti tag:

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

Impostiamo loro le dimensioni in rem:

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

Supponiamo di avere un codice HTML, per il quale risolveremo i problemi:

<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>

Riscrivete in rem tutte le unità impostate in pixel:

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;
}