Гибкая типографика при помощи :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

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

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree