Как сделать адаптивный шрифт в css или js?

Question

[Дмитрий Путилов]

Ребят, возник такой вопрос, раньше постоянно использовал адаптивный текст с помощью миксинов в scss, то есть вызывал миксин какой нибудь например @include adaptive_font(32, 16), где 32 - это самый большой размер, а 16 - самый маленький, но сейчас это для меня стало не актуально, и вопрос в том, что

Можно ли как нибудь сделать, что бы что бы текст по ширине всегда был допустим 50% относительно блока, скажем так, похожее св-во на font-size: 5vw, но что бы оно было относительно блока, весь инет облазил ,не чего найти почему то несмог((
надеюсь на вашу помощь, друзья программисты)

Мой код на миксинах, на всякий)

@mixin adaptiv-font($pcSize, $mobSize) {
  $maxWidth: 1600;
  $addSize: $pcSize - $mobSize;
  $maxWidth: $maxWidth - 320;
  font-size: calc(#{$mobSize + px} + #{$addSize} * ((1300px - 320px) / #{$maxWidth}));
  @media screen and (max-width: 1300px) {
    font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
  }
}

Comments

[Ankhena]

Можно ли как нибудь сделать, что бы что бы текст по ширине всегда был допустим 50% относительно блока, скажем так, похожее св-во на font-size: 5vw,

Можно.
Осталось посчитать сколько это vw.
При перестроениях блока переписывать в media.

Альтернативы - скрипты типа fittext.

раньше постоянно использовал адаптивный текст с помощью миксинов в scss

Если что, теперь для этого есть нативный clamp.

[Дмитрий Путилов]

Ankhena, Спасибо большое)

Answer 1

[black1277]

Нужно срочно поднимать навыки поиска в интернете.
Вот статья на английском с примерами кода и подробным объяснением
https://css-tricks.com/linearly-scale-font-size-wi...
Всё понятно и без перевода, но гугл переводчик вполне адекватно это переведет.