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

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

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

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

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

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

1vw = 1% от ширины окна

1vh = 1% от высоты окна

1vmin = 1vw или 1vh, выбирается меньшее

1vmax = 1vw или 1vh, выбирается большее

Если применить это к размерам окна iPhone 7, которое составляет 375х667, вычисленное значение в :root будет:

Адаптивную типографику всегда можно будет создавать различными способами. Каждый способ необходимо оценивать с точки зрения тех проблем, которые мы хотим решить, и это не просто адаптивность. Мне кажется, способ с :root самый гибкий.

Автор: Matt Smith

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

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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