CSS-ში rem ერთეულები

em ერთეულები ყოველთვის მოსახერხებელი არ არის. პრობლემა ისაა, რომ თუ ერთი ტეგის ფონტის ზომა შეიცვლება, მაშინ ის შეიცვლება მის ყველა შთამომავალ ტეგზე, რომლებიც თავიანთ ზომას მასთან მიმართებით ითვლიან.

ამიტომ შემოვიდნენ rem ერთეულები. ამ ერთეულების მნიშვნელობები ყოველთვის გამოითვლება html ტეგისთვის დაყენებული ფონტის ზომის მიმართ.

როგორც უკვე იცით, ნაგულისხმევად ეს მნიშვნელობა უდრის 16px-ს:

html {
	font-size: 16px;
}

მოდით შევხედოთ მაგალითს. დავუშვათ, გვაქვს ასეთი ტეგები:

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