Адаптивни размери на шрифтовете в 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;
	}
}

Опростете дадения код, използвайки описаната в учебника техника.