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

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

От автора: сегодня мы рассмотрим, как и для чего можно использовать селектор CSS 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;
}

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

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

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

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

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

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

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

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

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

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

:root {
  font-size: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */
}

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

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

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

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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