Rem-Einheiten in CSS

em-Einheiten sind nicht immer bequem. Das Problem ist, dass wenn man die Schriftgröße eines Tags ändert, sie sich auch für alle seine Nachfahren-Tags ändert, die ihre Größe relativ zu ihm berechnen.

Daher wurden die rem-Einheiten eingeführt. Die Werte dieser Einheiten werden immer relativ zur Schriftgröße berechnet, die für den html-Tag festgelegt ist.

Wie Sie bereits wissen, ist dieser Wert standardmäßig 16px:

html {
	font-size: 16px;
}

Sehen wir uns ein Beispiel an. Nehmen wir an, wir haben folgende Tags:

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

Lassen Sie uns ihnen Größen in rem zuweisen:

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

Nehmen wir an, wir haben einen HTML-Code, für den wir Aufgaben lösen werden:

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

Schreiben Sie alle in Pixeln angegebenen Einheiten in rem um:

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