Μονάδες rem στο CSS

Οι μονάδες em δεν είναι πάντα βολικές. Το πρόβλημα είναι ότι εάν αλλάξετε το μέγεθος της γραμματοσειράς σε μια ετικέτα, τότε θα αλλάξει και σε όλες τις θυγατρικές της ετικέτες, που υπολογίζουν το μέγεθός τους σε σχέση με αυτήν.

Για αυτό εισήχθησαν οι μονάδες rem. Οι τιμές αυτών των μονάδων υπολογίζονται πάντα σε σχέση με το μέγεθος γραμματοσειράς που ορίζεται για την ετικέτα html.

Όπως ήδη γνωρίζετε, η προεπιλεγμένη τιμή είναι 16px:

html {
	font-size: 16px;
}

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε τις ακόλουθες ετικέτες:

<div>
	<p>
		κείμενο
	</p>
</div>

Ας ορίσουμε τα μεγέθη τους σε rem:

div {
	font-size: 2rem; /* αντιστοιχεί σε 32px */
}
p {
	font-size: 2rem; /* αντιστοιχεί σε 32px */
	margin: 2rem;    /* αντιστοιχεί σε 32px */
}

Ας υποθέσουμε ότι έχουμε HTML κώδικα, για τον οποίο θα λύνουμε προβλήματα:

<main>
	<h1>κεφαλίδα</h1>
	<section>
		<h2>κεφαλίδα</h2>
		<p>
			κείμενο
		</p>
		<p>
			κείμενο
		</p>
	</section>
	<section>
		<h2>κεφαλίδα</h2>
		<p>
			κείμενο
		</p>
		<p>
			κείμενο
		</p>
	</section>
</main>

Ξαναγράψτε σε rem όλες τις μονάδες που δίνονται σε 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;
}