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

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

←
↑