J'essaie de faire fonctionner ce violon correctement lors de la redimensionnement du navigateur. Mais il scintille avec seulement chaque deuxième rendu rendu correctement rendu. Je ne peux pas comprendre pourquoi, mais j'aimerais qu'il s'adapte à un div au lieu d'utiliser la taille de la police de la première ligne.
Voici le FIDDLE P>
.divtext {
display: table;
font-family: impact;
font-size: 4vw;
}
<div id="container">
<div class="divtext">THIS IS JUST AN</div>
<div class="divtext">EXAMPLE</div>
<div class="divtext">TO SHOW YOU WHAT</div>
<div class="divtext">I WANT</div>
</div>
function changeSize(){
var els = document.getElementsByClassName("divtext"),
refWidth = els[0].clientWidth,
refFontSize = parseFloat(window.getComputedStyle(els[0],null).getPropertyValue("font-size")),
i = 1;
while(!!els[i]){
els[i].style.fontSize = refFontSize * refWidth / els[i].clientWidth + "px";
i++;
}
}
$(window).resize(function(){
changeSize();
});
3 Réponses :
Vous pouvez améliorer la fenêtre.Resize événement en ajoutant un étranglement.
https://jsfiddle.net/s8xl7d1p / Veuillez vous référer http://bencentara.com/code/2015/02/27/Optimizing-Window-Resize.html
Pas de scintillement, mais tout le point était d'accomplir un alignement gauche et droit du texte.
Je ne sais pas si je comprends parfaitement ce que vous demandez, mais je supprime affichage: table se débarrasse du scintillement.
N'aide pas. Je veux l'alignement droit et gauche des lignes. Essayez de redimensionner le navigateur dans et de sortir quelques temps et vous verrez l'erreur.
var els = document.getElementsByClassName("divtext")
var refWidth = els[0].clientWidth
var refFontSize = parseFloat(window.getComputedStyle(els[0], null).getPropertyValue("font-size"))
function changeSize() {
i = 0
while (!!els[i]) {
els[i].style.fontSize = refFontSize * refWidth / els[i].clientWidth + "px";
i++;
}
}
window.resize = changeSize
Cette fonction de redimensionnement n'est appelée qu'une seule fois, je ne suis donc pas capable de redimensionner le conteneur en conséquence.