หน่วย rem ใน CSS

หน่วย em ไม่สะดวกสบายเสมอไป ปัญหา คือถ้าเปลี่ยนขนาดฟอนต์ให้กับอิลิเมนต์หนึ่ง มันจะเปลี่ยนไปสำหรับอิลิเมนต์ลูกทั้งหมดด้วย ซึ่งคำนวณขนาดของตัวเองสัมพันธ์กับมัน

ดังนั้นจึงมีการนำหน่วย rem มาใช้ ค่าของหน่วยเหล่านี้จะถูกคำนวณเสมอ สัมพันธ์กับขนาดฟอนต์ที่กำหนดให้กับ อิลิเมนต์ html

อย่างที่คุณทราบแล้ว ค่าเริ่มต้น คือ 16px:

html {
	font-size: 16px;
}

ลองดูตัวอย่าง สมมติว่าเรามี อิลิเมนต์ดังนี้:

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

ลองกำหนดขนาดเป็น rem ให้พวกมัน:

div {
	font-size: 2rem; /* เท่ากับ 32px */
}
p {
	font-size: 2rem; /* เท่ากับ 32px */
	margin: 2rem;    /* เท่ากับ 32px */
}

สมมติว่าเรามีโค้ด HTML ซึ่งเราจะ ใช้แก้โจทย์ปัญหา:

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

เขียนใหม่เป็น 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;
}