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