Skalakan teks agar sesuai dengan saiz penyemak imbas dengan peralihan

Question

Saya mempunyai beberapa teks yang ingin saya ubah saiz kepada 100% penyemak imbas apabila menuding di atas butang. Bagaimanakah saya boleh menjadikan teks ini muat dalam penyemak imbas/bekas?

Saya tahu tentang menggunakan font size ，您可以执行类似 font-size:100vw tetapi animasi saiz fon sangat tidak stabil jadi saya tidak boleh menggunakan kaedah ini.

http://jsfiddle.net/0n15mfyL/

Bagi mereka yang tertanya-tanya tentang dithering, ia adalah ketara apabila fon dikecilkan: http://jsfiddle.net/rbk48upd/

Answer 1

Saya sedang mempertimbangkan requestAnimationFrame()

const 
  hoverMe        = document.querySelector('#hover-me')
, animTextSizing = document.querySelector('#anim-text-sizing')
, txtSizeStart   = parseInt(window.getComputedStyle(animTextSizing).getPropertyValue('font-size'))
  ;
let sizeLimit = 0,  currentTxtSize = txtSizeStart
  ;
hoverMe.onmouseover =_=>
  {
  sizeLimit = document.body.clientWidth;
  animGrow();
  }
hoverMe.onmouseout =_=>
  {
  sizeLimit = txtSizeStart;
  currentTxtSize++
  animReduce();
  }
function animGrow()
  {
  animTextSizing.style['font-size'] = `${++currentTxtSize}px`;

  if ( animTextSizing.clientWidth < sizeLimit)
    requestAnimationFrame(animGrow);
  }
function animReduce()
  {
  animTextSizing.style['font-size'] = `${--currentTxtSize}px`;

  if ( currentTxtSize > sizeLimit)
    requestAnimationFrame(animReduce);
  }

* {
  margin  : 0;
  padding : 0;
}
#anim-text-sizing {
  font-size   : 30px;
  width       : fit-content;
  white-space : nowrap;
  background  : #aabfe5;
  }
#hover-me {
  position   : fixed;
  background : red;
  color      : white;
  top        : 50%;
  left       : 50%;
  padding    : .5rem;
  cursor  : zoom-in;
  }

  <div id="hover-me">Hover me</div>
  <div id="anim-text-sizing"> Welcome to this Page </div>