Unit rem dalam CSS

Unit em tidak selalu nyaman. Masalahnya adalah jika Anda mengubah ukuran font satu tag, maka itu juga akan berubah untuk semua tag keturunannya, yang menghitung ukurannya relatif terhadap tag tersebut.

Oleh karena itu, unit rem diperkenalkan. Nilai dari unit ini selalu dihitung relatif terhadap ukuran font yang ditetapkan untuk tag html.

Seperti yang sudah Anda ketahui, secara default nilai ini adalah 16px:

html {
	font-size: 16px;
}

Mari kita lihat sebuah contoh. Misalkan kita memiliki tag seperti ini:

<div>
	<p>
		teks
	</p>
</div>

Mari kita tentukan ukuran mereka dalam rem:

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

Misalkan kita memiliki kode HTML, untuk which kita akan memecahkan masalah:

<main>
	<h1>header</h1>
	<section>
		<h2>header</h2>
		<p>
			teks
		</p>
		<p>
			teks
		</p>
	</section>
	<section>
		<h2>header</h2>
		<p>
			teks
		</p>
		<p>
			teks
		</p>
	</section>
</main>

Tulis ulang ke dalam rem semua unit yang diberikan dalam piksel:

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