@jeruthadam
Я крут

Что за хитроумные расчеты vw? Как делать офигенный резиновый текст?

Последнее время очень часто попадаются сайты с адаптивным текстом в vw. Да не просто подобранное значение, и не одного только font-size, что становится ясно что происходит все по какому-то принципу.

font-size: 9.6875vw;
    line-height: 9.21875vw;
    padding-bottom: 2.26562vw;
    letter-spacing: -.2375vw;


Что это? Откуда такие цифры? Что брать в расчет чтобы делать офигенный респонсив текст?

Я раньше использовал RucksackCSS, там тоже была хитрая формула, но приницп был совсем другой. Там был calc на html, и отсюда был адаптивность. Но эффект был не такой резиновый и классный, как если делать шрифт в vw. Как рассчитывать? 9.6875vw это явно не подбор с ручками (иначе зачем такое округление), а ведь еще line-height, паддинги, спейсинг

Вот пример mediaelection.com
Как видно, эти цифры в CSS классе, а не добавлены JS на клиенте. Т.е. это все просчитывается заранее. Как?
  • Вопрос задан
  • 2480 просмотров
Решения вопроса 3
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Т.е. это все просчитывается заранее. Как?

Элементарно:
Ответ написан
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Скорее всего это функция сборщика (или иной программной надстройки, или визуального редактора), который считает по формуле, сколько конкретный блок текста займёт места на экране и ставит в готовый билд эти значения. А-ля жёсткая макетизация на новый лад. Знаки после запятой нужны для точности рендеринга (чтобы округление не влияло на визуальный результат).

Если просто тупо использовать vw, то это плохой метод для создания адаптивности на сайте.

Данный метод (просто vw) можно и нужно использовать только тогда, когда нужно умещать конкретный текст в первозданном виде на все экраны (кол-во строк, переносы, кол-во символов и т. д.). С адаптивность эта идея не связана вовсе, не понимаю, почему её некоторые форсят.

Есть вариант такой:
https://css-tricks.com/snippets/css/fluid-typography/
Это старый и известный метод, у него есть свои преимущества и сценарии использования, но опять же в целом на сайте я не знаю, чем не угодили те же em, rem да даже px.

P. S. Ну а пример выше не умещается на экране телефона даже со всеми этими ухищрениями, хотя, видимо, призван делать именно это.

Update. Подумал, что там постоянно разные значения в CSS-файле, поэтому запутался немного в показаниях. Посмотрел, значения не меняются на разных экранах, файл mediaelection.com/css/common.css остается нетронутым. Нет «оверайда» стилей на фронтенде. Словом, то может делаться, например, в визуальных конструкторах (индивидуальной разработки) на том же React, либо через иное решение на том же React, которое заранее просчитывает размер того или иного элемента в зависимости от ряда параметров. Крупная студия вполне может позволить себе разработку такого решения для внутреннего использования.

Update 2. Ну или, как отметили Сергей delphinpro и tyzberd, можно по формуле в препроцессорах считать, сверяя результат визуально вручную.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Morpheus_God
@Morpheus_God
Ну если говорить про расчет этих самых viewports
то я находил подобную формулу
Размер элемента в макете / Ширина или высота макета * 100.
vw это view width
vh это view height
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы