Maison > Questions et réponses > le corps du texte
J'ai du texte que je souhaite redimensionner à 100 % du navigateur lorsque je survole le bouton. Comment puis-je adapter ce texte au navigateur/conteneur ?
Je sais utiliser font size
,您可以执行类似 font-size:100vw
mais l'animation de la taille de la police est très instable donc je ne peux pas utiliser cette méthode.
http://jsfiddle.net/0n15mfyL/
Pour ceux qui s'interrogent sur le tramage, cela se remarque lorsque la police est réduite : http://jsfiddle.net/rbk48upd/
P粉7295188062023-09-09 09:58:14
J'envisage 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>