Font scaling based on width of container

后端 未结 30 3083
面向向阳花
面向向阳花 2020-11-21 04:35

I\'m having a hard time getting my head around font scaling.

I currently have a website with a body font-size of 100%. 100% of what though? This seems t

30条回答
  •  自闭症患者
    2020-11-21 05:28

    HTML

    test

    JavaScript code for maximizing font-size:

    var fontSize, maxHeight, maxWidth, textElement, parentElement;
    textElement = document.getElementById('qwe');
    parentElement = textElement.parentElement;    
    maxHeight = parentElement.clientHeight;
    maxWidth = parentElement.clientWidth;
    fontSize = maxHeight;
    var minFS = 3, maxFS = fontSize;
    while (fontSize != minFS) {
      textElement.style.fontSize = `${fontSize}px`;
      if (textElement.offsetHeight < maxHeight && textElement.offsetWidth <= maxWidth) {
        minFS = fontSize;
      } else{
        maxFS = fontSize;
      }
      fontSize = Math.floor((minFS + maxFS)/2);
    }
    textElement.style.fontSize = `${minFS}px`;
    

提交回复
热议问题