От автора: с тех пор как я создал BigText более семи лет назад, я был немного одержим красивым большим текстом. К сожалению, в моем собственном блоге заголовки были, если честно, не совсем выразительными. Я хотел немного подправить их и перейти от фиксированных размеров текста к динамическому — сделать адаптивный текст, который увеличивается с увеличением окна просмотра. Я видел много вариантов этого подхода с использованием обработчиков resize в JavaScript.
BigText, который использует JavaScript для автоматического поиска нужного размера текста (это немного затратно и медленно).
FitText.js (от Дейва Рупперта) использует заданный разработчиком коэффициент масштабирования для линейного изменения размера текста (быстрый, но требует настройки).
Версия FitText.js без jQuery от Джереми Кита
Еще одним популярным вариантом является FlowType.JS — очень похожая концепция.
Были и другие реализации этого подхода к изменению размера текста в JavaScript. Но, насколько я могу судить, нам представилась возможность обойтись без них, когда в 2012 году единицы измерения на основании окна просмотра получили нормальную поддержку браузеров! Если CSS может сделать эту работу, пусть он ее и делает. Удалите ненужные JavaScripts — все!
Я уже могу представить первое возражение в комментариях к посту: плагины JavaScript могут изменять размер в зависимости от размеров элемента, а не только окна просмотра! Хорошо — действительно это так, но это просто еще один довод в пользу запросов контейнера. Мы можем справиться с этим с помощью CSS — это просто требует дополнительной, кропотливой работы, связанной с поддержанием кода для пределов, при которых наш текст должен изменяться, и когда он должен быть фиксированным. Но это все же лучше, чем обработчик события resize JavaScript (по моему скромному мнению). Если мы знаем, где размещаются в макете элементы, мы можем просто скорректировать значения единиц окна просмотра, чтобы имитировать что-то подобное на единицы контейнера.
Пример
Текущие спецификации макета для постов в моем собственном блоге следующие:
Базовый размер — 100% гибкой ширины.
Контент имеет максимальную ширину: 589px (31em при размере шрифта: 19px) и поддерживает эту максимальную ширину даже при добавлении правого блока.
(Эта спецификация макета напоминает мне sizes от srcset с адаптивными изображениями, хм …)
Это довольно простой пример. У нас есть два предела: контрольная точка, с которой мы будем переключаться на использование единиц окна просмотра, и верхний предел, когда мы достигаем максимальной ширины контента (589 пикселей).
Вы можете настроить контрольные точки и минимальный размер шрифта для своего случая:
#demo-1 { /* Минимальный размер шрифта */ font-size: 20px;
}
/* Произвольная минимальная контрольная точка */
/* Переход от минимального размера шрифта в 20px к vw с использованием этой формулы: */
@media (min-width: 320px) { #demo-1 { /* ( Минимальный размер шрифта / Контрольную точку ) ✕ 100 */ /* ( 20px / 320px ) ✕ 100 = 6.25vw */ font-size: 6.25vw; }
}
/* Контрольная точка максимальной ширины контента */
/* Переход от vw максимальному размеру шрифта с использованием этой формулы: */
@media (min-width: 589px) { #demo-1 { /* Контрольная точка ✕ ( Единицы окна просмотра / 100 ) */ /* 589px ✕ ( 6.25vw / 100 ) = 36.8125px */ font-size: 36.8125px; }
}
Предостережение. Я использую пиксели в нескольких местах, где я обычно использую эмы или ремы, чтобы упростить чтение кода примера.
Формулы
Переход от фиксированного минимального размера шрифта к единицам окна просмотра. Эта формула используется в приведенном выше примере с контрольной точки 320px.
Единицы окна просмотра = ( размер шрифта (px) / контрольная точка (px) ) ✕ 100
Переход от единиц окна просмотра к фиксированным максимальным размерам шрифта. Эта формула используется в приведенном выше примере с контрольной точки 589px.
Размер шрифта (px) = контрольная точка (px) ✕ (единицы окна просмотра / 100 )
После того, как вы получили пиксели, вы, конечно, можете конвертировать их в rem или em.
Неравномерное масштабирование
Если вы хотите, чтобы текст увеличивался или уменьшался с уменьшенной скоростью, вы можете использовать calc для суммирования элемента vw с фиксированным блоком CSS (например, px или em), — но в таком случае выравнивание для различных пределов осуществляется немного сложнее, и это уже выходит за рамки данной статьи.
Альтернативное решение
#demo-1 { /* Минимальный размер шрифта */ font-size: 20px; font-size: 6.25vw;
}
Я видел, что некоторые разработчики предлагают отказаться от минимального медиа-запроса вообще, как в приведенном выше коде. Это, наверное, хорошо, но мне не очень нравится, что неограниченный минимальный размер шрифта может быстро стать нечитаемым на супер маленьких контрольных точках. Например на smart watch.
В ожидании новых единиц
Мне интересно, как запросы контейнера (или подобные) могут работать с единицами окна просмотра. Теперь я начинаю понимать, что добавление в будущем единиц контейнера может помочь упростить код наподобие этого:
#demo-2 { font-size: 20px;
}
@media (min-width: 320px) { #demo-2 { /* Будьте оснорожны: `cw` - это не реальная единица */ font-size: 6.25cw; }
}
Это позволит обойтись без второй контрольной точки, поскольку размер шрифта будет определяться размером произвольного контейнера, который уже имеет верхний предел max-width.
В любом случае
Все вышесказанное было сказано для того, чтобы донести до вас мысль — я сделал все свои заголовки в блоге огромными, и это действительно делает меня счастливым. Я использую единицы окна просмотра только с минимальным пределом. Если ваш экран достаточно широкий (скажем, 3440 пикселей), вы сможете, вероятно, прочитать их из космоса:
Вероятно, это только начало длинной последовательности изменений, которые я внесу в суперширокий макет для моего блога.
Автор: Zach Leatherman
Источник: https://www.zachleat.com/
Редакция: Команда webformyself.
