Rem-yksiköt CSS:ssä

em-yksiköt eivät aina ole käteviä. Ongelmana on, että jos yhden tagin fontin kokoa muutetaan, niin se muuttuu myös kaikille sen lapsitageille, jotka laskevat kokoonsa suhteessa siihen.

Siksi otettiin käyttöön rem-yksiköt. Näiden yksiköiden arvot lasketaan aina suhteessa html-tagille asetettuun fontin kokoon.

Kuten jo tiedät, oletusarvoisesti tämä arvo on 16px:

html {
	font-size: 16px;
}

Katsotaanpa esimerkkiä. Oletetaan, että meillä on tällaiset tagit:

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

Asetetaan niille koot rem-yksiköissä:

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

Oletetaan, että meillä on HTML-koodi, jolle ratkaisemme tehtäviä:

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

Kirjoita uudelleen rem:iin kaikki pikseleinä annetut yksiköt:

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