Типография — один из самых тяжелых элементов адаптивного веб-дизайна. В идеале Вы хотите иметь шрифт, максимально читабельный на разных размерах экранов. Обычно, разработчики правят шрифты под определенные размеры устройств, и сейчас мы поможем решить Вам этот вопрос.
Начнем с установки медиа-запроса для экранов меньше 45em:
@media screen and (max-width: 45em) {
p {
font-size: 1.5em;
}
}
Тепер размер шрифта не изменяется до тех пор, пока минимальное значение не будет достигнуто.
Использование: root
Наше решение для более адаптивного типа заключается в вычислении размера шрифта на основе высоты и ширины экрана пользователя с помощью селектора :root.
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
Теперь Вы можете использовать значение em на основе того, которое рассчитанное с помощью :root.
body {
font: 1rem/1.6 "Open Sans", sans-serif;
}
Практика
Если Вы заметите, функция calc() обработает значения для размера шрифта веб-страницы. Давайте быстро рассмотрим их, чтобы понять, как вычисляется размер шрифта.
1vw = 1% ширины окна просмотра
1vh = 1% высоты окна просмотра
1vmin = 1vw или 1vh, в зависимости от того, что меньше
1vmax = 1vw или 1vh, в зависимости от того, что больше
Если мы применим это к размерам экрана iPhone 7, который равен 375×667, вычисленное значение :root будет:
:root {
font-size: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */
}
Что же дальше?
Постоянно технологии двигаются вперед и с каждым годом будут использоваться технологии проще и современнее. Но сейчас — это одна из лучших и адекватных технологий для быстрой адаптации шрифта в реалиях веб-сайта: использование :root обеспечивает наиболее гибкое решение.
Перевод статьи: Flexible type with :root
Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!