HTML：

Question

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

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

我尝试将.resize类应用于具有以下结果的各种元素：

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

a：与div相同的结果。

窗口加载时

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

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

Answer 1

将类.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);

Vanilla JS：调整font-awesome以适应容器

HTML：

JS：

1 个答案: