От автора: сегодня мы рассмотрим, как и для чего можно использовать селектор CSS root. Одним из элементов адаптивного дизайна, с которым бывает сложно определиться, это типографика. В идеале вам хочется получить максимально подходящий шрифт для всех областей просмотра. Обычно для этого нужно начать с базового размера шрифта и потом менять его для различных контрольных точек.
|
1 2 3 4 5 6 7 8 9 |
p { font-size: 1em; } @media screen and (max-width: 45em) { p { font-size: 1.25em; } } |
В этом примере шрифт не меняется по тех пор, пока не достигнута контрольная точка.
Использование :root
Я предпочитаю такой подход к гибкой типографике, при котором нужно рассчитать размер шрифта, исходя из высоты и ширины области просмотра с помощью селектора :root:
|
1 2 3 |
:root { font-size: calc(1vw + 1vh + .5vmin); } |
Теперь можно задействовать элемент em , основанный на значении, подсчитанном посредством :root:
|
1 2 3 |
body { font: 1rem/1.6 sans-serif; } |
Единицы области просмотра
Вы заметите, что функции calc() были переданы значения в единицах области просмотра. Давайте кратко рассмотрим их, чтобы понять, как рассчитывается размер шрифта в селекторе root.
1vw = 1% от ширины области просмотра
1vh = 1% от высоты области просмотра
1vmin = 1vw or 1vh, выбрать меньшее
1vmax = 1vw or 1vh, выбрать большее
Если мы применим это к размерам области просмотра iPhone 7 — 375×667, рассчитанное значение:root будет:
|
1 2 3 |
:root { font-size: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */ } |
Подходы к гибкой типографике всегда будут отличаться друг от друга и нам стоит оценивать каждый подход по тому, для чего нам это нужно, рассматривая не только адаптивные свойства. Я узнал, что использование :root таким образом дает самые удобные решения.
Источник: //allthingssmitty.com/
Редакция: Команда webformyself.
