सीएसएस में rem यूनिट्स

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