Unidades rem en CSS

Las unidades em no siempre son convenientes. El problema es que si cambia el tamaño de fuente de una etiqueta, también cambiará para todas las etiquetas descendientes, que calculan su tamaño en relación a él.

Por ello se introdujeron las unidades rem. Los valores de estas unidades siempre se calculan en relación al tamaño de fuente definido para la etiqueta html.

Como ya sabe, por defecto este valor es 16px:

html {
	font-size: 16px;
}

Veamos un ejemplo. Supongamos que tenemos las siguientes etiquetas:

<div>
	<p>
		texto
	</p>
</div>

Asignémosles tamaños en rem:

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

Supongamos que tenemos un código HTML, para el cual resolveremos problemas:

<main>
	<h1>encabezado</h1>
	<section>
		<h2>encabezado</h2>
		<p>
			texto
		</p>
		<p>
			texto
		</p>
	</section>
	<section>
		<h2>encabezado</h2>
		<p>
			texto
		</p>
		<p>
			texto
		</p>
	</section>
</main>

Reescriba en rem todas las unidades definidas en píxeles:

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