Какой нужно сделать шрифт, адаптивным под любые размеры экрана?

Question

[koposov_v]

Как сделать шрифт таким, чтобы какое не было большое слово из 10 12 букв, он всегда влезал в область экрана МАКСИМАЛЬНО, как это возможно, знаю что вроде можно использовать свойство calc но не понимаю, как с ним работать вообще. (объект позиционирован абсолютно ).
Использую сейчас на данный момент font-size: 7vw;
Но когда текст маленький, то он тоже сжимается, а хотелось чтобы он не сжимался

Comments

[koposov_v]

Что нужно прописать в calc если я допустим хочу 40px если есть место, если нет уменьшается шрифт ?

Answer 1

[Никита Михайлов]

Можно добавить точку остановки с помощью медиа-запросов. На определённой ширине перестать уменьшать размер.

h1 {
  font-size: 7vw;
}

@media screen and (max-width: 750px) {
  h1 {
    font-size: 20px;
  }
}

Либо воспользоваться известной формулой

h1 {
  font-size: calc(20px + 10 * (1200px - 320px) / 880)
}

Где:

20px — минимальный размер
10 — разница между максимальным и минимальным размерами (если предположить, что максимально заголовок имеет размер 30 пикселей)
1200px — максимальная ширина блока с контентом
320px — минимальная ширина блока с контентом
880 — разница между максимальной и минимальной шириной

Comments

[koposov_v]

Вот это мне известная формула и нужна была, спасибо что расписал))

Answer 2

[Евгений]

https://simplefocus.com/flowtype
fittextjs.com

Comments

[koposov_v]

Воу, спасибо