Гибкая типографика в CSS посредством :root

Гибкая типографика в CSS посредством :root

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

В этом примере шрифт не меняется по тех пор, пока не достигнута контрольная точка.

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

Я предпочитаю такой подход к гибкой типографике, при котором нужно рассчитать размер шрифта, исходя из высоты и ширины области просмотра с помощью селектора :root:

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

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

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

Теперь можно задействовать элемент em , основанный на значении, подсчитанном посредством :root:

Единицы области просмотра

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

1vw = 1% от ширины области просмотра

1vh = 1% от высоты области просмотра

1vmin = 1vw or 1vh, выбрать меньшее

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

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

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

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

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

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

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

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

Комментарии 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