我一直在使用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元素，以便为字体真棒的默认提供一些输入font-size: inherit的风格。

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

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

div ：字体不会显示，或字体以默认大小显示，然后在窗口大小上消失。

a ：与div相同的结果。

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

所以，我猜测.resize类应该应用于i元素，但我需要以不同方式定义其大小或容器的大小。

仅供参考，我目前对每个按钮都使用这个HTML：

HTML：

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

链接地址: http://www.djcxy.com/p/87511.html

上一篇: Vanilla JS: Resize font

下一篇: Decreasing font size dynamically in relative containers