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