Гибкая типографика при помощи :root

Гибкая типографика при помощи :root

От автора: в адаптивном веб-дизайне есть одна вещь, с которой очень сложно определиться, это шрифт. В идеале нам нужен полностью жидкий шрифт на всех разрешениях экрана. Стандартный способ заключается в том, что мы берем стартовый размер шрифта и меняем его при пересечении границ размеров окна.

p {
  font-size: 1em;
}
@media screen and (max-width: 45em) {
  p {
 font-size: 1.25em;
  }
}

Размер шрифта не меняется до тех пор, пока не будет пересечена граница размера окна браузера.

Использование :root

Мне нравится делать шрифт более гибким. Для этого я вычисляю размер шрифта на основе высоты и ширины окна браузера при помощи селектора :root:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

Теперь можно использовать единицы измерения em, которые опираются на значение, вычисленное в :root:

body {
  font: 1rem/1.6 sans-serif;
}

Единицы измерения viewport

Вы заметили, что функция calc() передает значения в viewport единицах? Давайте быстренько разберем, что это такое, чтобы понять, как вычисляется значение размера шрифта в селекторе root.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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 самый гибкий.

Автор: Matt Smith

Источник: http://allthingssmitty.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree