CSS-এ 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: 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;
}