He estado creando un reproductor de audio usando vanilla JS para manipular el HTML<audio> elemento.

El reproductor es de tamaño dinámico, con todos los elementos escalados para adaptarse al DIV principal.

He aplicado todos los métodos que puedo encontrar para escalar la fuente para que se ajuste al contenedor principal y las soluciones combinadas de una manera que parece funcional, sin embargo, no puedo hacer que los iconos de fuente impresionante escalen de la misma manera.

Los iconos están contenidos de la siguiente manera:

HTML:

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

Mi solución funciona implementandowindow.addEventListener('resize', resizeFont);, con elresizeFont función definida de la siguiente manera:

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 + '%';
    }
  }
}

Configuré el tamaño de fuente deldiv,button oa elemento en CSS para proporcionar alguna entrada para el valor predeterminado de font-awesomefont-size: inherit estilo.

losresizeFont(); La función se llama una vez en la carga de la página, lo que garantiza que las fuentes que se muestran se ajustan al tamaño inicial del reproductor de audio.

He intentado aplicar el.resize clase a varios elementos con los siguientes resultados:

div : la fuente no se muestra o la fuente se muestra con el tamaño predeterminado y luego desaparece al cambiar el tamaño de la ventana.

a : mismo resultado quediv.

i : resizeFont() en la ventana de carga SÍ escala el icono al tamaño correcto para que se ajuste al contenedor, pero la fuente aún desaparece cuando se activa el evento de cambio de tamaño de la ventana.

Entonces, supongo que el.resize se supone que la clase se aplica a lai elemento, pero que de alguna manera necesito definir su tamaño, o el tamaño de su contenedor, de manera diferente.

FYI, actualmente estoy usando este HTML para cada botón:

HTML:

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