Unit rem dalam CSS

Unit em tidak selalu mudah. Masalahnya ialah jika anda menukar saiz fon untuk satu tag, ia juga akan berubah untuk semua tag keturunannya, yang mengira saiznya relatif kepadanya.

Oleh itu, unit rem diperkenalkan. Nilai unit ini sentiasa dikira relatif kepada saiz fon yang ditetapkan untuk tag html.

Seperti yang anda sudah tahu, secara lalai nilai ini ialah 16px:

html {
	font-size: 16px;
}

Mari kita lihat contoh. Katakan kita mempunyai tag seperti berikut:

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

Mari kita tentukan saiz mereka dalam rem:

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

Katakan kita mempunyai kod HTML, yang mana kita akan menyelesaikan masalah:

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

Tulis semula semua unit yang ditetapkan dalam piksel kepada rem:

main {
	margin: 64px auto 32px;
}

h1 {
	font-size: 32px;
}
section {
	font-size: 16px;
	margin-bottom: 32px;
}
h2 {
	font-size: 24px;
	margin-bottom: 32px;
}
p {
	font-size: 20px;
	margin-bottom: 12px;
}