Jednostki rem w CSS

Jednostki em nie zawsze są wygodne. Problem polega na tym, że jeśli zmienimy rozmiar czcionki jednemu znacznikowi, to zmieni się on również wszystkim jego znacznikom-potomkom, które obliczają swój rozmiar względem niego.

Dlatego wprowadzono jednostki rem. Wartości tych jednostek są zawsze obliczane względem rozmiaru czcionki ustawionego dla znacznika html.

Jak już wiesz, domyślnie ta wartość wynosi 16px:

html {
	font-size: 16px;
}

Spójrzmy na przykład. Załóżmy, że mamy takie znaczniki:

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

Ustawmy im rozmiary w rem:

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

Załóżmy, że mamy kod HTML, dla którego będziemy rozwiązywać zadania:

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

Przepisz na rem wszystkie jednostki podane w pikselach:

main {
	margin: 64px auto 32px;
}

h1 {
	font-size: 32px;
}
section {
	font-size: 16px;
	margin-bottom: 32px;
}
h2 {
	font-size: 24px;
	margin-bottom: 32px;
}
p {
	font-size: 20px;
	margin-bottom: 12px;
}