CSS ရှိ rem ယူနစ်များ

em ယူနစ်များသည် အမြဲတမ်း အဆင်ပြေချောမွေ့မှု မရှိပါ။ ပြဿနာမှာ တကယ်လို့ တစ်ခုခုသော tag တစ်ခု၏ ဖောင့်အရွယ်အစားကို ပြောင်းလဲလိုက်ပါက၊ ၎င်း၏ ဆင်းသက်လာသော tag များ (သူတို့၏ အရွယ်အစားကို ၎င်းနှင့် ဆက်စပ်တွက်ချက်သော tag များ) အားလုံး၏ အရွယ်အစားလည်း ပြောင်းလဲသွားမည်ဖြစ်သည်။

ထို့ကြောင့် rem ယူနစ်များကို မိတ်ဆက်ခဲ့သည်။ ထိုယူနစ်များ၏ တန်ဖိုးများကို ဆက်စပ်သော tag ၏ ဖောင့်အရွယ်အစားနှင့် အမြဲတမ်း ဆက်စပ်မှုရှိသော်လည်း၊ ၎င်းသည် အခြေခံအားဖြင့် html tag အတွက် သတ်မှတ်ထားသော ဖောင့်အရွယ်အစားနှင့် အမြဲတမ်း တွက်ချက်ပါသည်။

သင်သိပြီးသားအတိုင်း၊ ပုံသေအားဖြင့် ထိုတန်ဖိုးသည် 16px နှင့် ညီပါသည်။

html {
	font-size: 16px;
}

ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် အောက်ပါ tag များ ရှိသည်ဆိုပါစို့။

<div>
	<p>
		စာသား
	</p>
</div>

သူတို့ကို rem ဖြင့် အရွယ်အစားများ သတ်မှတ်ပေးကြပါစို့။

div {
	font-size: 2rem; /* 32px နှင့် ကိုက်ညီသည် */
}
p {
	font-size: 2rem; /* 32px နှင့် ကိုက်ညီသည် */
	margin: 2rem;    /* 32px နှင့် ကိုက်ညီသည် */
}

ကျွန်ုပ်တို့ ပြဿနာများ ဖြေရှင်းရန် အတွက် HTML ကုဒ်တစ်ခု ရှိသည်ဆိုပါစို့။

<main>
	<h1>ခေါင်းစီး</h1>
	<section>
		<h2>ခေါင်းစီး</h2>
		<p>
			စာသား
		</p>
		<p>
			စာသား
		</p>
	</section>
	<section>
		<h2>ခေါင်းစီး</h2>
		<p>
			စာသား
		</p>
		<p>
			စာသား
		</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;
}