CSS'te rem Birimleri

em birimleri her zaman kullanışlı değildir. Sorun, bir etiketin yazı boyutunu değiştirdiğinizde, boyutunun ondan türeyen ve kendi boyutunu ona göre hesaplayan tüm etiketler için de değişmesidir.

Bu nedenle rem birimleri tanıtıldı. Bu birimlerin değerleri her zaman html etiketi için belirlenen yazı boyutuna göre hesaplanır.

Bildiğiniz gibi, varsayılan olarak bu değer 16px'dir:

html {
	font-size: 16px;
}

Bir örnek üzerinden inceleyelim. Aşağıdaki etiketlere sahip olduğumuzu varsayalım:

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

Şimdi onlara rem cinsinden boyutlar verelim:

div {
	font-size: 2rem; /* 32px'ye karşılık gelir */
}
p {
	font-size: 2rem; /* 32px'ye karşılık gelir */
	margin: 2rem;    /* 32px'ye karşılık gelir */
}

Üzerinde alıştırma yapacağımız bir HTML kodumuz olduğunu varsayalım:

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

Piksel cinsinden verilen tüm birimleri rem cinsinden yeniden yazın:

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