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

Question

Вот ссылка на то, что я сделал
Часть текста с небольшим разрешением выходит из родительского поля и обрезается. Как это исправить?
использование jQuery было бы предпочтительнее, но я не против JavaScript.
UPDATE
То, что я хотел сделать, это то, что при изменении размера страницы, как сделать текст, чтобы соответствовать родительскому полю?

Answer 1

Вы можете настроить размер экрана с помощью css

@media screen and (min-width: 500px) and (max-width: 700px) {
body{
    font-size: x-small;
    }
}

@media screen and (min-width: 701px) and (max-width: 2000px) {
body{
    font-size: medium;
    }

}   

Answer 2

Для этого вы можете использовать fittext.js .Эти другие решения будут работать.Но если вы измените размер браузера, он может действительно запутаться.

Answer 3

Это можно сделать с помощью javascript или jquery.Вы можете вызвать функцию изменения размера jQuery

$(window).resize(function() {
  if($(this).height() < 640) {
      $(body).css("font-size","10pt");
  }
});

С помощью этого способа вы можете настроить свою логику ....