Rem egységek a CSS-ben

A em egységek nem mindig kényelmesek. A probléma az, hogy ha megváltoztatjuk egy elem betűméretét, akkor az megváltozik az összes leszármazott elem számára is, amelyek a méretüket ehhez viszonyítják.

Ezért vezették be a rem egységeket. Ezeknek az egységeknek az értéke mindig a html elemre beállított betűmérethez viszonyítva számítódik ki.

Mint azt már tudod, alapértelmezetten ez az érték 16px:

html {
	font-size: 16px;
}

Nézzünk egy példát. Tegyük fel, hogy a következő elemek vannak:

<div>
	<p>
		szöveg
	</p>
</div>

Állítsuk be a méreteiket rem egységben:

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

Tegyük fel, hogy van egy HTML kódunk, amelyre feladatokat fogunk megoldani:

<main>
	<h1>fejléc</h1>
	<section>
		<h2>fejléc</h2>
		<p>
			szöveg
		</p>
		<p>
			szöveg
		</p>
	</section>
	<section>
		<h2>fejléc</h2>
		<p>
			szöveg
		</p>
		<p>
			szöveg
		</p>
	</section>
</main>

Írd át rem egységbe az összes, pixelben megadott értéket:

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