Добавьте следующий код JavaScript на страницу / сайт:
давал аудиоплеер, используя vanilla JS для управления HTML<audio>
элемент.
Плеер имеет динамический размер со всеми элементами, масштабированными, чтобы соответствовать родительскому DIV.
Я применил все методы, которые я могу найти, для масштабирования шрифта, чтобы он соответствовал родительскому контейнеру и комбинированным решениям таким образом, который кажется функциональным, однако я не могу сделать иконки шрифтов-офигенных масштабируемыми таким же образом.
Значки содержатся следующим образом:
HTML:<div>
<button>
<a>
<i class="fa fa-play">
</i>
</a>
</button>
</div>
Мое решение работает путем реализацииwindow.addEventListener('resize', resizeFont);
сresizeFont
функция определяется следующим образом:
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>