Добавьте следующий код JavaScript на страницу / сайт:

давал аудиоплеер, используя vanilla JS для управления HTML<audio> элемент.

Плеер имеет динамический размер со всеми элементами, масштабированными, чтобы соответствовать родительскому DIV.

Я применил все методы, которые я могу найти, для масштабирования шрифта, чтобы он соответствовал родительскому контейнеру и комбинированным решениям таким образом, который кажется функциональным, однако я не могу сделать иконки шрифтов-офигенных масштабируемыми таким же образом.

Значки содержатся следующим образом:

HTML:
<div>
  <button>
    <a>
      <i class="fa fa-play">
      </i>
    </a>
  </button>
</div>

Мое решение работает путем реализацииwindow.addEventListener('resize', resizeFont);сresizeFont функция определяется следующим образом:

JS:
function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

Я установил размер шрифтаdiv,button или жеa элемент в CSS, чтобы обеспечить некоторый ввод для шрифта-AWesome по умолчаниюfont-size: inherit стиль.

resizeFont(); Функция вызывается один раз при загрузке страницы, гарантируя, что отображаемые шрифты масштабируются в соответствии с исходным размером аудиоплеера.

Я пытался применить.resize Класс для различных элементов со следующими результатами:

div : шрифт не отображается или шрифт отображается с размером по умолчанию, а затем исчезает при изменении размера окна.

a : тот же результат, что иdiv.

i : resizeFont() при загрузке окна ДЕЛАЕТ масштабировать значок до правильного размера, чтобы соответствовать контейнеру, но шрифт по-прежнему исчезает при запуске события изменения размера окна.

Итак, я думаю, что.resize класс должен быть применен кi элемент, но что мне как-то нужно определить его размер или размер контейнера, по-другому.

К вашему сведению, в настоящее время я использую этот HTML-код для каждой кнопки:

HTML:
<div>
  <button>
    <a>
      <i class="fa fa-play resize" aria-hidden="true"></i>
    </a>
  </button>
</div>

Ответы на вопрос(1)

Ваш ответ на вопрос