Андозҳои фонтҳо дар CSS барои дастгоҳҳои гуногун

Шумо аллакай медонед, ки воҳидҳои rem нисбат ба андози фонти унсури решагӣ ҳисоб карда мешаванд, ки ба таври пешфарз баробар ба 16px аст:

html {
	font-size: 16px; /* қимати пешфарз */
}

Ин хусусиятро барои тағйир додани андози фонтҳо ба таври васеъ вақте ки бараи экран тағйир мекунад, истифода мебаранд. Биёед бубинем, ки ин чӣ гуна сурат мегирад.

Бигзор ба тегҳои мо андозҳои зерин таъин шуда бошанд:

h1 {
	font-size: 1.5rem; /* ба 24px мувофиқат мекунад */
}
p {
	font-size: 1rem; /* ба 16px мувофиқат мекунад */
	margin: 2rem;    /* ба 32px мувофиқат мекунад */
}

Биёед чунин кунем, ки вақте ки бараи экран тағйир мекунад, андозҳое, ки бо воситаи rem таъин шудаанд, барои дастгоҳҳои гуногун тағйир кунанд. Барои ин бо истифода аз дархостҳои медиа, андози фонти унсури решагиро тағйир медиҳем:

@media (max-width: 600px) {
	html {
		font-size: 16px;
	}
}
@media (min-width: 600px) and (max-width: 1200px) {
	html {
		font-size: 18px;
	}
}
@media (min-width: 1200px) {
	html {
		font-size: 20px;
	}
}

Коди зерин дода шудааст:

@media (max-width: 300px) {
	h1 {
		font-size: 32px;
	}
	h2 {
		font-size: 24px;
	}
	p {
		font-size: 16px;
	}
}
@media (min-width: 300px) and (max-width: 900px) {
	h1 {
		font-size: 36px;
	}
	h2 {
		font-size: 27px;
	}
	p {
		font-size: 18px;
	}
}
@media (min-width: 900px) {
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 30px;
	}
	p {
		font-size: 20px;
	}
}

Коди додашударо бо истифода аз техникаи дар дастур китоб тавзеҳдодашуда, сода кунед.