Как сделать отзывчивый размер шрифта, но с Pixel Perfect на определённой ширине экрана?

Question

[Maxim Kalinin]

У меня есть дизайн сайта в Figma для разных размеров экрана (мобильный, планшетный и десктопный). Как сделать так, чтобы размер шрифта плавно менялся между этими размерами экрана, при этом совпадал с макетом в Figma?

Тот же вопрос касается ширины/высоты иконок или картинко. Как плавно менять их размеры от ширины экрана, но иметь pixel perfect на некоторых ширинах экрана, для которых есть макет?

Пример:
Ширина экрана: 320px, 768px и 1920px.
Размеры шрифта: 40px, 76px и 112px соответственно.
На этих трёх ширинах размер шрифта должен совпадать с макетом, но между этими точками шрифт должен плавно меняться.

Comments

[Ankhena]

Если шрифт изменяется пропорционально, то можно использовать единицы vw. Чтобы не было слишком мелко или огромно, то совместно с clamp (или min или max).
Если не пропорционально, то всё тоже самое, но дополнительно вносить корректировки через @media

Answer 1

[hesrun]

Как-то давно находил эту статью
https://css-tricks.com/using-a-mixin-to-take-the-m...

Второй вариант юзать vw единицы измерения, и на контрольной точке, обновлять как в макете.

Comments

[Ankhena]

Теперь есть clamp для современных браузеров.

[Maxim Kalinin]

clamp(val1, val2, val3)
Ankhena, я понимаю что clamp даёт возможность указать крайние значения, но как посчитать предпочтительное значение, которое по середине записывается?
Можете привести пример кода для моего случая, который написан в вопросе?

[Ankhena]

Maxim Kalinin, на калькуляторе
Вьюпорт в px знаете, размер шрифта в px знаете, посчитать %, надеюсь, тоже сможете.