我一直在使用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 + '%';
    }
  }
}

我在CSS中设置了div,button或元素的font-size,以便为font-awesome的默认font-size：inherit样式提供一些输入.

resizeFont();在页面加载时调用一次函数,确保显示的字体缩放以适合音频播放器的初始大小.

我试图将.resize类应用于各种元素,结果如下：

div：字体不显示,或字体显示为默认大小,然后在窗口调整大小时消失.

a：与div相同的结果.

i：窗口加载时resizeFont()将图标缩放到正确的大小以适合容器,但是当窗口调整大小事件被触发时,字体仍然消失.

所以,我想.resize类应该应用于i元素,但我不知何故需要以不同的方式定义它的大小或容器的大小.

解决方法:

将类.jcfResize添加到包含应调整大小的字体的任何元素.

将以下javascript代码添加到页面/站点：

function jcfResizeText() {
    var elements  = document.getElementsByClassName('jcfResize');
    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 + '%';
        }
    }
}

jcfResizeText();
window.addEventListener('resize', jcfResizeText);